Angular 反应式表单自定义验证器。仅在选中复选框时启用验证
Angular reactive forms custom validator. Enable Validation only when checkbox checked
我在验证仅标记的复选框时遇到问题。首先,当组件初始化并且所有复选框都被禁用时,如果他们单击保存按钮,它应该输出一个验证,表明您没有单击任何复选框。第二次验证是当您标记了一个复选框但没有输入任何数量时,它应该只标记 "This field is required"。但是现在,当我单击保存按钮时,即使禁用了所有数量,也会出现错误 "This field is required"。我该如何解决这个问题?也请我评论的功能,也许这会有所帮助。谢谢
请点击此处查看我的 stackblitz link:CODE LINK
patchValues() {
let rows = this.myForm.get('rows') as FormArray;
this.orders.forEach(material => {
material.materials.forEach(x => {
rows.push(this.fb.group({
checkbox_value: [null],
material_id: new FormControl({ value: x.id, disabled: true }, Validators.required),
material_name: x.name,
quantity: [null]
}));
// this.formArrayLength++;
});
});
}
您需要在数组中为您的表单和子表单创建 custom validators。
当其中一个复选框被选中时,表单有效。看起来像
formValidator(control: AbstractControl): { [key: string]: any } {
return control.value.rows.some(i => i.checkbox_value) ? null : { 'checkboxReq': 'Some checkbox field is required' }
}
将其添加到您的表单中
this.myForm.setValidators([this.formValidator.bind(this)])
在模板中,您可以使用 myForm.getError('checkboxReq')
获取它
<small class="form-text text-muted danger">{{myForm.getError('checkboxReq')}}</small>
子表单需要另一个验证器
subFormValidator(control: AbstractControl): { [key: string]: any } {
return control.value.checkbox_value ? { 'req': 'This field is required' } : null
}
初始化子表单时添加它
(this.fb.group({
checkbox_value: [null],
material_id: [{ value: x.id, disabled: true }],
material_name: x.name,
quantity: [null]
}, [this.subFormValidator.bind(this)]));
模板
<small class="form-text text-muted danger" *ngIf="row.invalid && row.touched">This field is required</small>
我在验证仅标记的复选框时遇到问题。首先,当组件初始化并且所有复选框都被禁用时,如果他们单击保存按钮,它应该输出一个验证,表明您没有单击任何复选框。第二次验证是当您标记了一个复选框但没有输入任何数量时,它应该只标记 "This field is required"。但是现在,当我单击保存按钮时,即使禁用了所有数量,也会出现错误 "This field is required"。我该如何解决这个问题?也请我评论的功能,也许这会有所帮助。谢谢
请点击此处查看我的 stackblitz link:CODE LINK
patchValues() {
let rows = this.myForm.get('rows') as FormArray;
this.orders.forEach(material => {
material.materials.forEach(x => {
rows.push(this.fb.group({
checkbox_value: [null],
material_id: new FormControl({ value: x.id, disabled: true }, Validators.required),
material_name: x.name,
quantity: [null]
}));
// this.formArrayLength++;
});
});
}
您需要在数组中为您的表单和子表单创建 custom validators。
当其中一个复选框被选中时,表单有效。看起来像
formValidator(control: AbstractControl): { [key: string]: any } {
return control.value.rows.some(i => i.checkbox_value) ? null : { 'checkboxReq': 'Some checkbox field is required' }
}
将其添加到您的表单中
this.myForm.setValidators([this.formValidator.bind(this)])
在模板中,您可以使用 myForm.getError('checkboxReq')
<small class="form-text text-muted danger">{{myForm.getError('checkboxReq')}}</small>
子表单需要另一个验证器
subFormValidator(control: AbstractControl): { [key: string]: any } {
return control.value.checkbox_value ? { 'req': 'This field is required' } : null
}
初始化子表单时添加它
(this.fb.group({
checkbox_value: [null],
material_id: [{ value: x.id, disabled: true }],
material_name: x.name,
quantity: [null]
}, [this.subFormValidator.bind(this)]));
模板
<small class="form-text text-muted danger" *ngIf="row.invalid && row.touched">This field is required</small>