Question

如果这些复选框之一不正确，我想使表格无效。这就是我编写HTML的方式。

<div class="col-md-12 labelparent" formGroupName="Source">
    <label class="col-md-3">DAM Source </label>
    <span class="col-md-3">
                    <input type="checkbox"
                           name="referenceType"
                           formControlName="DAMSource"
                           id="DAMSourcecheckbox" />
                    <label for="DAMSourcecheckbox">DAM</label>

                    <input type="checkbox"
                           name="referenceType"
                           formControlName="ContentStudioSource"
                           id="ContentStudioSourceheckbox" />
                    <label for="ContentStudioSourceheckbox">Contentstudio</label>
                    <input type="checkbox"
                           name="referenceType"
                           formControlName="LocalSource"
                           id="LocalSourcecheckbox" />
                    <label for="LocalSourcecheckbox">Custom</label>
              </span>
</div>

还有我的formGroup

 'Source': this.fb.group({
              DAMSource: false,
              ContentStudioSource: false,
              LocalSource: false
            })

如何在此上添加验证器，如果未单击任何复选框，则该窗体无效，或者在Source对象中，它们的键都不为真？

Answer 1

这是如何操作的基本要点。

我准备了Stackblitz，但不确定它是否有效

  keys = ['ck1','ck2','ck3','ck4','ck5','ck6'];

  fg: FormGroup;

  constructor(@Inject(FormBuilder) private fb: FormBuilder) { }

  ngOnInit() {
    this.fg = this.buildForm();

  }

  buildForm(): FormGroup {
    let group = {};

    this.keys.forEach(k => group[k] = new FormControl(false));

    return this.fb.group(group, { validator: this.truthyValidator() });
  }

  truthyValidator() {
    return (group: FormGroup) => {
      this.keys.forEach(k => { 
        if (group.controls[k].value === false) 
          group.controls[k].setErrors({ falsey: 'Cannot be false' });
        else
          group.controls[k].setErrors(null);
      });
    }
  }

Answer 2

您可以为嵌套组创建一个自定义验证器，该验证器检查是否至少选中了一个复选框。

'Source': this.fb.group({
   DAMSource: false,
   ContentStudioSource: false,
   LocalSource: false
}, { validator: this.checkChk })

和自定义验证程序：

checkChk(group: FormGroup) {
   return Object.keys(group.controls).some(x => group.controls[x].value === true) ? 
         null : { notValid: true }
}

...如果至少选中一个复选框，则返回null，这表示表单有效，如果表单无效，则返回notValid。您可以通过参考此错误错误名称在模板中显示错误。

这是一个演示（这里的Source是父表单组）：https://stackblitz.com/edit/angular-pv2bsa?file=src/app/app.component.ts

Angular Form Builder验证对象中的至少一个属性为true

2 个答案: