Question

我有反应形式，并且不希望在用户真正访问某个字段之前触发验证。

例如，这是一个字段：

<input type="text" [formControl]="customerNumber">

这是组件：

customerNumber: FormControl = new FormControl(
    null, {validators: [Validators.required]
});

如你所见，它很简单。我遇到的问题是，当显示表单并且输入字段获得ng-invalid类时触发验证，即使它没有触及。

我需要在用户触摸该字段后才触发验证。

Answer 1

正如有人在评论中提到的那样：

初始配置：

customerNumber: FormControl = new FormControl(null);

仅在尚未设置验证器的情况下订阅值更改并设置验证器：

this.sub = this.form.controls.customerNumber.valueChanges.subscribe(value => {
   if (!this.form.controls.customerNumber.validator) {  
       this.form.controls.customerNumber.setValidators(Validators.required);
   }
})

如果需要对触发验证器设置的值执行验证请务必致电：

this.form.controls.customerNumber.updateValueAndValidity();

设置后立即

。

此外，请确保在完成组件后取消订阅：

ngOnDestroy() {
    this.sub.usubscribe();
}

修改

另一种选择是创建一个自定义的必需验证器，仅当控件是脏的时才验证。：

import { FormControl } from '@angular/forms';

function customRequiredValidator(c: FormControl) {
    if(!c.dirty)
    {
      return null;
    }
    ...
}

然后，您可以在需要的地方导入它，并使用它代替Validators.required。

不要在Angular2中验证未触及的字段

1 个答案: