键入时的角度反应表单验证答案

【问题标题】：Angular reactive forms validation while typing键入时的角度反应表单验证
【发布时间】：2018-05-08 23:04:26
【问题描述】：

我正在处理此表单并希望在输入时进行验证。当前的行为是我选择输入，输入，当我点击其他站点时，它会显示错误。我认为当我设置控制时它发生的错误，有效和肮脏，但我无法弄清楚。

打字稿

buildForm(): void {
 this.userForm = this.fb.group({
  'email': ['', [
    Validators.required,
    Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
  ]
  ],
  'password': ['', [
    Validators.required,
    Validators.minLength(6),
    Validators.maxLength(25)
   ]
   ],
 });
 this.userForm.valueChanges.subscribe(data => this.onValueChanged(data));
}

onValueChanged(data?: any) {
 if (!this.userForm) { return; }
 const form = this.userForm;
 for (const field in this.formErrors) {
  // clear previous error message (if any)
  this.formErrors[field] = '';
  const control = form.get(field);
  if (control && control.invalid && control.dirty) {
    const messages = this.validationMessages[field];
    for (const key in control.errors) {
      this.formErrors[field] += messages[key] + ' ';
     }
   }
  }
}

函数 onValueChanged() 改变这个对象

formErrors = {
  'email': '',
  'password': ''
};

这个对象有验证信息。

validationMessages = {
 'email': {
  'required': 'Email is required',
  'pattern': 'Email is invalid'
 },
'password': {
  'required': 'Password is required',
  'minlength': 'Debe tener 6 caracteres como mínimo',
  'maxlength': 'Password cannot be more than 40 characters long.',
 }
};

HTML

      <mat-form-field class="example-full-width">
          <input matInput placeholder="Email" formControlName="email" required>
          <mat-error *ngIf="formErrors.email" align="start" class="form__error">
            {{ formErrors.email }}
          </mat-error>
        </mat-form-field>     
        <mat-form-field class="example-full-width">
          <input matInput placeholder="Password" type="password" formControlName="password" required>
          <mat-error *ngIf="formErrors.password" align="start" class="form__error">
            {{ formErrors.password }}
          </mat-error>
        </mat-form-field>

【问题讨论】：

标签： angular angular-material angular-reactive-forms angular-forms

【解决方案1】：

默认情况下，当触摸某个控件或提交表单且该控件无效时，会出现表单域错误。要更改该行为，您可以使用自定义 ErrorStateMatcher - 请参阅 Angular Material 示例 Input with a custom ErrorStateMatcher。

【讨论】：

【解决方案2】：

迟到的答案，但我会把它贴在那里以防它对任何人有帮助。

使用 Angular 6+，您可以通过 onChange FormControl 选项属性调整表单验证行为，例如：

'email': ['', {
    validators: [
        Validators.required,
        Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$')
    ],
    updateOn: 'change'
 }]

updateOn可以是：

change - 更改后立即验证

blur - 离开现场时验证

submit - 在表单提交时验证

来源：
https://angular.io/api/forms/AbstractControlOptions
https://angular.io/guide/form-validation#note-on-performance

（我刚刚在这里回答了类似的问题：Fire validation when focus out from input in angular?）

【讨论】：

【解决方案3】：

在模板驱动的表单中，您可以使用ngModelOptions

<input matInput [(ngModel)]="name" required [ngModelOptions]="{ updateOn: 'change' }" name="Name" />

【讨论】：