在Angular中,FormGroup上的验证器会覆盖掉FormControl上的单个验证器。要解决这个问题,可以使用setValidators
方法来为FormControl添加额外的验证器。
以下是一个示例代码:
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
@Component({
selector: 'app-example',
template: `
`,
})
export class ExampleComponent implements OnInit {
myForm: FormGroup;
constructor(private formBuilder: FormBuilder) {}
ngOnInit() {
this.myForm = this.formBuilder.group({
myControl: ['', Validators.required], // FormControl with required validator
});
const additionalValidator = Validators.pattern('[a-zA-Z]*'); // Additional validator for myControl
// Add the additional validator to myControl without removing the required validator
const validators = this.myForm.get('myControl').validator;
const newValidators = Validators.compose([validators, additionalValidator]);
this.myForm.get('myControl').setValidators(newValidators);
this.myForm.get('myControl').updateValueAndValidity();
}
}
在上面的代码中,我们首先创建了一个FormGroup,并在其中定义了一个名为myControl
的FormControl,使用了Validators.required
作为单个验证器。
然后,我们定义了一个名为additionalValidator
的额外验证器,使用Validators.pattern('[a-zA-Z]*')
来验证输入值是否为字母。
最后,我们使用setValidators
方法将额外的验证器添加到myControl
中,同时保留了原有的验证器。然后,使用updateValueAndValidity
方法更新FormControl的值和验证状态。
注意:在实际项目中,你可能需要根据具体的需求和验证规则进行相应的调整和修改。