Angular模板驱动表单邮箱pattern校验失效 输入合规仍报错

一共4处代码错误直接导致校验逻辑完全失效：

• 正则规则完全错误：配置的pattern值里，@符号前、域名后缀的.前多了非法空格，且两个字符匹配段没有加+量词（仅匹配单个字符），等于要求输入的内容必须包含「空格+@」「空格+.」结构，合法邮箱永远无法匹配规则，因此输入框持续报红。
• 属性拼写错误：[readonly]绑定的变量写为odel.assetStatus，漏了model的首字母m，模板解析阶段抛错会干扰表单控件的状态同步。
• 长度校验绑定错误：写的驼峰属性maxLength="100"不会被Angular表单识别为内置校验规则，对应错误键email.errors?.maxLength永远拿不到值，长度校验完全不生效。
• 错误提示逻辑混乱：最后一个通用错误的判断条件(email.errors && (email.invalid || email.touched))逻辑错误，只要控件被触碰过、不管是必填错误还是其他错误，都会同时触发「邮箱格式非法」提示，且没有精确匹配pattern错误类型。

按以下步骤调整代码即可：

1. 修正邮箱正则，去掉多余空格、补充匹配量词，使用标准邮箱校验规则
2. 修正readonly绑定的变量拼写错误
3. 将长度校验改为Angular识别的[maxlength]绑定，对应错误键改为全小写的maxlength
4. 拆分每个mat-error的判断条件，每个提示只对应单一错误类型，移除冗余的touched/invalid判断（Angular Material组件会自动控制错误提示的显示时机，仅在控件失焦/表单提交、校验不通过时展示错误）

修复后的完整代码：

<mat-form-field appearance="fill" fxFlex="30">
    <mat-label>EMAIL ADDRESS</mat-label>
    <input 
        matInput 
        type="email" 
        pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$" 
        [(ngModel)]="model.email"
        [maxlength]="100" 
        #email="ngModel" 
        required 
        [readonly]="model.assetStatus === 'Done'"
    >
    <mat-error *ngIf="email.errors?.required">Inspector email is required.</mat-error>
    <mat-error *ngIf="email.errors?.maxlength">Max length is 100.</mat-error>
    <mat-error *ngIf="email.errors?.pattern">Invalid Email.</mat-error>
</mat-form-field>

补充说明：如果不需要严格自定义邮箱规则，也可以直接移除pattern属性，依赖type="email"自带的内置邮箱校验，判断email.errors?.email即可触发格式错误提示。

内容的提问来源于stack exchange，提问作者Diya Agastya