Question

我有以下验证方法：

static emptyControl(control: FormControl): any {

    if (!control.value || control.value=="") {
      return {
        message: "must not be empty"
      };
    }

    return null;

  }

如果我在表单控件上使用它，那么我会收到错误：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'null'.如果我返回错误而不是null，则错误消失。

首先，我将输入绑定到未初始化的变量，然后在ngOnInit中进行异步调用，并将返回的值分配给subscribe中的此变量。

验证空/未设置字段的正确方法是什么？

Answer 1

您正在混合模板驱动形式和反应形式。请选择其中之一。有两个绑定ngModel和formControl有时会产生这种不需要的行为。

相反，请将值设置为表单控件而不是ngModel，即完全删除ngModel。如果您想稍后设置值，请使用setValue：

 this.someFormGroup.get('text').setValue('foo')

同时从模板中删除任何验证，因此请从模板中删除required，然后使用Validators.required，因为您使用的是被动形式。同样如评论中所述，您在此处不需要自定义验证器，因为Validators.required是您想要的。

将模板修改为：

<div *ngIf="someFormGroup.hasError('required', 'text') && someFormGroup.controls.text.dirty">
  <label class="errorMessage"> Field is required! </label>
</div>
<form [formGroup]="someFormGroup">
  <input name="text" formControlName="text" />
</form>

TS：

ngOnInit() {
  this.someFormGroup = new FormGroup({
    text: new FormControl('', [Validators.required])
  })
}

StackBlitz

验证导致ExpressionChangedAfterItHasBeenCheckedError

1 个答案: