在Angular的表单验证中,有时可能出现表单验证无效,但是输入已经更新的情况。这通常发生在表单控件提供商的自定义控件或动态表单控件中。
解决该问题的一种方法是使用ngModel和FormControl进行联合绑定,并在控件值发生变化时手动更新FormControl的值。
示例代码如下:
template文件:
component文件:
import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  name = '';
  nameControl = new FormControl('', Validators.required);
  ngOnInit() {
    this.nameControl.valueChanges.subscribe((value) => {
      this.name = value;
    });
  }
  nameChanged() {
    this.nameControl.setValue(this.name, { emitEvent: false });
  }
}
在此示例中,将表单控件的ngModel和FormControl进行联合绑定,并设置了一个nameChanged()函数,它会在控件值发生变化时手动更新FormControl的值。这将确保FormControl的值和ngModel的值相同,以避免表单验证无效但输入已更新的问题。