Angular 自定义验证器在输入未被触及时不触发？

Question

我有一个反应形式如下：

this.form = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', this.customValidator()]
});

我还有一个带有 [disabled] 条件的“提交”按钮：

<button [disabled]="form.invalid" (click)="create()">Create</button>

如果 email 输入未被触动并且我修改了 name 输入，customValidator 不会触发 和 Create 按钮启用尽管 customValidator() 会 return 出错。

另一方面，name 控件有一个 Validators.required 验证，即使输入未被触及也会被触发，这是所需的行为。

Example on stackblitz: I want the email input to be required (and the create button to be disabled) when name has value on it even if email is untouched.

Answer 1

你能试试这个吗:

  ngOnInit() {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, this.customVal()]],
    });
  }

Answer 2

找到了解决问题的几种方法：

1 Angular cross-validation.

自定义验证器应用于 FormGroup 而不是 FormControl。每次修改表单时都会执行验证。

this.form = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['']
}, { validators: this.customValidator});

2 订阅表单 valueChanges + updateValueAndValidity。

this.form = this.formBuilder.group({
  name: ['', Validators.required],
  email: ['', this.customValidator()]
});

并且在 ngOnInit 上，每当表单更改时，都会执行验证：

this.form.valueChanges.subscribe(x => {
    this.form.get('email').updateValueAndValidity();
})

Answer 3

正如 Iñigo 所说，只有在修改输入或手动调用“updateValueAndValidity”时，FormControl 才是“有效的”。

所以另一种方法是订阅 form.get('name').valueChange（不要忘记取消订阅）

this.form.get('name').valueChange.subscribe(_=>{
  this.form.get('email').updateValueAndValidity()
})

或者我们可以在.html

中使用输入事件

<input formControlName="name" class="form-control" placeholder="Name" 
      (input)="form.get('email').updateValueAndValidity()" />

Answer 4

请检查此解决方案。我没有使用 abstratcontrol，而是使用了更容易处理的 FormControl。您也可以将 parent-child 参数传递给自定义验证器，如本例所示：

 ngOnInit() {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', this.customVal('name')], -> you can pass the value here
    });
  }

请查看 stackblitz 以获得完整的解决方案。

https://stackblitz.com/edit/angular-custom-validator-uhhicz?file=src/app/app.component.ts

Angular 自定义验证器在输入未被触及时不触发？

Angular custom validator not firing when input untouched?

angular

angular-reactive-forms

angular-custom-validators

1 Angular cross-validation.

2 订阅表单 valueChanges + updateValueAndValidity。