在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的值相同,以避免表单验证无效但输入已更新的问题。