角度反应形式自定义验证器。仅在选中复选框时启用验证

Question

我在验证仅标记的复选框时遇到问题。首先，当组件初始化并禁用所有复选框时，如果他们单击保存按钮，它应输出一个验证，表明您没有单击任何复选框。第二个验证是当您标记一个复选框但没有输入任何数量时，它应该只标记“此字段是必需的”。然而，现在，当我单击保存按钮时，即使已禁用所有数量，也会出现错误“此字段是必需的”。我怎么解决这个问题？请注意我的评论功能，也许这会有所帮助。谢谢。

请点击这里查看我的stackblitz链接：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++;
      });
    });
  }

Answer 1

您需要为表单创建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
}

初始化subForm时添加它

(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>

stackblitz example with changes