Angular 中包含禁止表单值的数组的表单验证
Form validation with array with forbidden form values in Angular
我正在开发一个简单的 Angular 表单,它有两个验证器规则:
- 该值不能为空
- 该值不能是先前定义的值之一(来自数组
forbiddenValues
)。
我知道我可以轻松添加所需的验证器,如下所示:
this.titleForm = this.formBuilder.group({
'title': ['', Validators.required]
});
我怎样才能动态地为我的数组添加规则 forbiddenValues
?
您需要为验证创建某种工厂(实际上只是一个 lambda):
this.titleForm = this.formBuilder.group({
'title': ['', [Validators.required, (control: AbstractControl) => {
return this.forbiddenValues.indexOf(control.value) === -1 ? null : {'forbiddenValue': true};
}]
});
但每次禁止值更改时,您都需要手动触发表单验证,使用 this.titleForm.updateValueAndValidity()
如果您想在多个地方集中使用验证功能,这可能适合您。
import { FormGroup, FormBuilder, Validators, AbstractControl, ValidatorFn } from '@angular/forms';
function isForbidden(forbiddenValues: string[]): ValidatorFn {
return (c: AbstractControl): { [key: string]: boolean } | null => {
if (forbiddenValues.indexOf(c.value) !== -1) {
return { 'forbiddenValues': true };
}
return null;
};
}
@Component({...
this.titleForm = this.formBuilder.group({
'title': ['', [Validators.required, isForbidden(this.forbiddenValues)]]
});
我正在开发一个简单的 Angular 表单,它有两个验证器规则:
- 该值不能为空
- 该值不能是先前定义的值之一(来自数组
forbiddenValues
)。
我知道我可以轻松添加所需的验证器,如下所示:
this.titleForm = this.formBuilder.group({
'title': ['', Validators.required]
});
我怎样才能动态地为我的数组添加规则 forbiddenValues
?
您需要为验证创建某种工厂(实际上只是一个 lambda):
this.titleForm = this.formBuilder.group({
'title': ['', [Validators.required, (control: AbstractControl) => {
return this.forbiddenValues.indexOf(control.value) === -1 ? null : {'forbiddenValue': true};
}]
});
但每次禁止值更改时,您都需要手动触发表单验证,使用 this.titleForm.updateValueAndValidity()
如果您想在多个地方集中使用验证功能,这可能适合您。
import { FormGroup, FormBuilder, Validators, AbstractControl, ValidatorFn } from '@angular/forms';
function isForbidden(forbiddenValues: string[]): ValidatorFn {
return (c: AbstractControl): { [key: string]: boolean } | null => {
if (forbiddenValues.indexOf(c.value) !== -1) {
return { 'forbiddenValues': true };
}
return null;
};
}
@Component({...
this.titleForm = this.formBuilder.group({
'title': ['', [Validators.required, isForbidden(this.forbiddenValues)]]
});