在Angular 2中将函数绑定到无效的输入FormControl

Question

总结

我正在创建一个带有验证模式的FormControl。当模式无效时，我想调用一个函数，该函数将显示与引发的错误相关的错误消息。

示例

ngOnInit() {
        this.personalForm = new FormGroup({
            email : new FormControl(this.auth.user.email,Validators.required ),
            first_name: new FormControl(null,[
                Validators.required,
                Validators.pattern("^[a-zA-Zñáéíóúü']{1,30}$")
            ]),
        });
    }

输入字段无效时调用的函数。

showError();

问题

是否可以在抛出错误时调用函数并在输入字段无效时检索错误？

Answer 1

使用FormGroup 的statusChanges（有效或无效）或valueChanges 事件来执行此操作：

this.personalForm.valueChanges.debounceTime(500).subscribe((data) => {
  if (!this.personalForm.valid) {
    this.showError();
  }
}