要解决Angular 9中动态添加验证器不显示错误消息的问题,可以按照以下步骤进行操作:
ngForm
或formGroup
,并且将表单控件与相应的表单控件名称绑定。
FormGroup
对象并为其添加表单控件和验证器。import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
myControl: new FormControl('', Validators.required)
});
}
}
setValidators
方法来更新表单控件的验证器。import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent implements OnInit {
myForm: FormGroup;
ngOnInit() {
this.myForm = new FormGroup({
myControl: new FormControl('', Validators.required)
});
}
addValidator() {
this.myForm.get('myControl').setValidators([Validators.required, Validators.minLength(3)]);
this.myForm.get('myControl').updateValueAndValidity();
}
}
在上面的代码中,addValidator
方法用于动态添加验证器,并调用updateValueAndValidity
方法来更新表单控件的状态和错误消息的显示。
通过以上步骤,动态添加的验证器应该会显示错误消息。确保在动态添加验证器后调用updateValueAndValidity
方法以及使用*ngIf
指令来在HTML中显示错误消息。