2 自定义验证器在 Angular 中不以反应形式工作
2 Custom validator not working in reactive forms in Angular
我需要弄清楚如何才能在我的反应式表单中添加第二个验证器。我已将 "AvailabilityBalanceValidator" 添加到初始化行的 patchValues() 中。但是只有第一个验证器在工作,为什么第二个验证器 AvailabilityBalanceValidator() 不工作。请检查这个 link CHECK THIS LINK
patchValues() {
const materialForms = this.orders
.reduce((acc, i) => [...acc, ...i.materials], [])
.map(x => {
return (this.fb.group({
checkbox_value: [null],
material_id: [{ value: x.id, disabled: true }],
material_name: x.name,
available_qty: 10,
quantity: [null]
}, [this.subFormValidator.bind(this), { validator: this.AvailabilityBalanceValidator('available_qty', 'quantity') }]));
});
this.myForm.setControl('rows', this.fb.array(materialForms));
this.myForm.setValidators([this.formValidator.bind(this)])
}
AvailabilityBalanceValidator(campo1: string, campo2: string) {
return (group: FormGroup): { [key: string]: any } => {
const balance = group.controls[campo1];
const quantity = group.controls[campo2];
if (balance.value < quantity.value) {
return {
out: true
};
}
};
}
我明白为什么你的第二个验证器不起作用了。事实上,验证器的添加是错误的。
您将验证器数组指定为 this.fb.group()
方法的第二个参数:
this.fb.group({...}, [this.subFormValidator.bind(this), { validator: this.AvailabilityBalanceValidator('available_qty', 'quantity') }];
方法 FormBuilder.group
接收一个对象作为第二个参数,该对象具有两个可能的参数 validator
和 asyncValidator
(参见 docs)。
要修复缺少的验证,您应该更改代码,如下所示:
this.fb.group({...}, {
validator: Validators.compose([this.subFormValidator.bind(this), this.AvailabilityBalanceValidator('available_qty', 'quantity')])
};
更新:
subFormValidator(control: AbstractControl): { [key: string]: any } {
return control.value.checkbox_value &&
// Only adds the error if quantity is not set or it's an empty string
(!control.value.quantity || control.value.quantity.length === 0)? { 'req': 'This field is required' } : null
}
在你的html中:
<small class="form-text text-muted danger" *ngIf="row.hasError('req')">This field is required</small>
否则,如果控件出现错误,则始终显示该消息。
我需要弄清楚如何才能在我的反应式表单中添加第二个验证器。我已将 "AvailabilityBalanceValidator" 添加到初始化行的 patchValues() 中。但是只有第一个验证器在工作,为什么第二个验证器 AvailabilityBalanceValidator() 不工作。请检查这个 link CHECK THIS LINK
patchValues() {
const materialForms = this.orders
.reduce((acc, i) => [...acc, ...i.materials], [])
.map(x => {
return (this.fb.group({
checkbox_value: [null],
material_id: [{ value: x.id, disabled: true }],
material_name: x.name,
available_qty: 10,
quantity: [null]
}, [this.subFormValidator.bind(this), { validator: this.AvailabilityBalanceValidator('available_qty', 'quantity') }]));
});
this.myForm.setControl('rows', this.fb.array(materialForms));
this.myForm.setValidators([this.formValidator.bind(this)])
}
AvailabilityBalanceValidator(campo1: string, campo2: string) {
return (group: FormGroup): { [key: string]: any } => {
const balance = group.controls[campo1];
const quantity = group.controls[campo2];
if (balance.value < quantity.value) {
return {
out: true
};
}
};
}
我明白为什么你的第二个验证器不起作用了。事实上,验证器的添加是错误的。
您将验证器数组指定为 this.fb.group()
方法的第二个参数:
this.fb.group({...}, [this.subFormValidator.bind(this), { validator: this.AvailabilityBalanceValidator('available_qty', 'quantity') }];
方法 FormBuilder.group
接收一个对象作为第二个参数,该对象具有两个可能的参数 validator
和 asyncValidator
(参见 docs)。
要修复缺少的验证,您应该更改代码,如下所示:
this.fb.group({...}, {
validator: Validators.compose([this.subFormValidator.bind(this), this.AvailabilityBalanceValidator('available_qty', 'quantity')])
};
更新:
subFormValidator(control: AbstractControl): { [key: string]: any } {
return control.value.checkbox_value &&
// Only adds the error if quantity is not set or it's an empty string
(!control.value.quantity || control.value.quantity.length === 0)? { 'req': 'This field is required' } : null
}
在你的html中:
<small class="form-text text-muted danger" *ngIf="row.hasError('req')">This field is required</small>
否则,如果控件出现错误,则始终显示该消息。