angular - Angular 表单构建器验证对象中的至少一个属性为真

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 对象中，它们的键都不为真？

标签： angularangular-reactive-forms

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);
      });
    }
  }