如何在Angular中使用响应式表单实现邮箱输入实时校验

要实现keyup事件触发的响应式表单邮箱校验，你只需要调整FormControl的更新触发配置即可，修改后的完整代码如下：

TS 组件代码 #

// 需提前从@angular/forms导入所需依赖
import { FormGroup, FormControl, Validators } from '@angular/forms';

export class RegisterComponent {
  // 不要用any声明表单类型，指定为FormGroup可获得类型校验支持
  registerform: FormGroup;

  ngOnInit(): void {
    this.registerform = new FormGroup({
      emailId: new FormControl(null, {
        // 配置校验规则
        validators: [Validators.required, Validators.email],
        // 指定键盘抬起时更新表单值并触发校验
        updateOn: 'keyup'
      })
    });
  }

  get emailid() { 
    return this.registerform.get('emailId');
  }

  submitData() {
    if (this.registerform.valid) {
      // 表单校验通过后的提交逻辑
      console.log('表单提交数据：', this.registerform.value);
    }
  }
}

模板代码 #

<form [formGroup]="registerform" (ngSubmit)="submitData()">
  <!-- 把input类型改为email，移动端会自动唤起邮箱输入键盘，体验更优 -->
  <input type="email" formControlName="emailId" placeholder="请输入邮箱">
  <div *ngIf="emailid.invalid && (emailid.touched || emailid.dirty)">
    <span class="myerror" name="err" *ngIf="emailid.errors?.required">*邮箱不能为空</span>
    <span class="myerror" name="err" *ngIf="emailid.errors?.email">*邮箱格式不正确</span>
  </div>
  <button type="submit" [disabled]="registerform.invalid">提交</button>
</form>

补充说明 #

• 如果你不需要严格限制触发时机，Angular响应式表单默认就会在输入值变化时实时触发校验，不需要额外加updateOn: 'keyup'配置即可满足需求
• 原有模板里的touched判断是指控件失去焦点后才显示错误，如果想要边输入边显示错误，可以去掉touched判断，改为*ngIf="emailid.invalid && emailid.dirty"即可

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