在 Angular 中,我们可以在 FormGroup 内部使用条件自定义验证器。这对于需要动态验证的表单非常有用。
首先,我们创建一个自定义验证器。在这个例子中,我们的自定义验证器需要检查是否选择了某个选项并且同时输入了一个值。
export function customValidator(): ValidatorFn {
return (control: AbstractControl): { [key: string]: any } | null => {
const selectControl = control.get('selectControl');
const inputControl = control.get('inputControl');
if (selectControl && inputControl) {
const selectValue = selectControl.value;
const inputValue = inputControl.value;
if (selectValue && inputValue) {
return null;
}
}
return { 'customError': true };
};
}
接下来,我们在 FormGroup 内定义一个 FormGroup,并将这个自定义验证器应用于它。
this.form = this.formBuilder.group({
mainGroup: this.formBuilder.group({
selectControl: ['', Validators.required],
inputControl: ['', Validators.required]
}, { validator: customValidator() })
});
在这个例子中,我们将 customValidator
应用于 mainGroup
中的所有控件,包括 selectControl
和 inputControl
。
最后,我们可以使用以下代码来获取自定义错误提示。
Please select an option and provide an input value.