验证包含带有复选框的输入的表单组，如果未选中任何复选框，则应显示错误消息答案

【问题标题】：Validate form group that contains inputs with checkboxes, should display error message if no checkboxes are selected验证包含带有复选框的输入的表单组，如果未选中任何复选框，则应显示错误消息
【发布时间】：2019-11-22 13:28:51
【问题描述】：

如果我的表单组中没有复选框被选中，我需要显示验证错误消息。不能使用 jquery，一切都必须使用 angular 7 来完成。这是一种反应形式。我已经尝试设置 ngIf 条件，并应用条件验证函数，但都没有工作。这是我的表单组中包含复选框的部分

   initForm() {
      this.financialSectionSix = this.formBuilder.group({
        medicaidOrSssi: [false],
        snap: [false],
        freeOrReducedPriceLunch: [false],
        tanf: [false],
        wic: [false],
        noneOfTheAbove: [false]
       });
     }

这是 HTML 的一部分

<div [hidden]="selectedSectionGroup.sectionSix" class="tab-pane fade show active"
   id="{{financialSectionEnum.SECTION_SIX}}" role="tabpanel">
   <form [formGroup]="financialSectionSix">
      <label class="form-check-label" for="financial1">
      <input required formControlName="medicaidOrSssi" id="medicaidOrSssi" class="form-check-input"
         data-hint="yes" type="checkbox" value="true">
      Medicaid or Supplemental Security Income (SSI)
      </label>
      <label class="form-check-label" for="cada-form-student-financial-section-6-1-2">
      <input required formControlName="snap" id="snap" class="form-check-input" data-hint="yes" type="checkbox"
         value='true'>
      Food Stamps or Supplemental Nutrition Assistance Program (SNAP)
      </label>
   </form>
</div>

选中其中一个框时，该值应从 false 更改为 true，如果未选中，则应从 true 更改为 false。

【问题讨论】：

尝试使用Validators.required？ medicaidOrSssi: [false, Validators.required]
我没有，我应该把那个sn-p的代码放在哪里来测试？

标签： angular validation checkbox angular7

【解决方案1】：

我猜你需要一个自定义验证器，比如：

  selectAtleastOne(c: FormGroup) {
    const selectAtleastOne = Object.values(c.value).some(Boolean);
    return selectAtleastOne ? null : {
      selectAtleastOne: {
        valid: false,
        error: true
      }
    };
  }

你可以像这样使用它：

this.financialSectionSix = this.formBuilder.group({
          medicaidOrSssi: [false],
          snap: [false],
          freeOrReducedPriceLunch: [false],
          tanf: [false],
          wic: [false],
          noneOfTheAbove: [false]
        }, { validator: this.selectAtleastOne });

在 HTML 中：

<form [formGroup]="financialSectionSix">
    <label class="form-check-label" for="financial1">
      <input required formControlName="medicaidOrSssi" id="medicaidOrSssi" class="form-check-input"
         data-hint="yes" type="checkbox" value="true">
      Medicaid or Supplemental Security Income (SSI)
      </label><br>
      <label class="form-check-label" for="cada-form-student-financial-section-6-1-2">
      <input required formControlName="snap" id="snap" class="form-check-input" data-hint="yes" type="checkbox"
         value='true'>
      Food Stamps or Supplemental Nutrition Assistance Program (SNAP)
      </label>
      <div style="color: red" *ngIf="financialSectionSix?.errors?.selectAtleastOne?.error">Select atleaset one</div>
      <br>
      <div>{{financialSectionSix.value | json}}</div>
   </form>

在此处查看现场演示 https://stackblitz.com/edit/angular-yxwkby

【讨论】：