取消选中 Angular 7 中表单组中的所有框

Posted 2023-02-22

【中文标题】取消选中 Angular 7 中表单组中的所有框

【英文标题】：Uncheck all boxes in form group in angular 7

【发布时间】：2019-11-24 10:42:59

【问题描述】：

我需要在一个表单组中有一个复选框，unchecks 所有checkboxes 在同一个表单组中，并保留我的验证。

在我的 TS 文件中，我有：

 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="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>

<label class="form-check-label" for="form-student-financial- 
 section-6-1-6">
  <input required formControlName="noneOfTheAbove" id="noneOfTheAbove" 
    class="form-check-input" data-hint="yes" type="checkbox" value='true' 
    id="form-student-financial-section-6-1-6"> None of the Above
  </label>
 </form>
</div>

我需要在此表单组中将最后一个输入字段仅用于uncheck 所有其他checkboxes，

我还需要能够保持我的验证，使用 ngModel 会导致问题，因为我的表单 controls 无法注册。

【参考方案1】：

您可以保留最后一个复选框作为它自己的控件（未注册到表单组），并只听该复选框上的更改事件： 例如：

<input required formControlName="noneOfTheAbove" id="noneOfTheAbove" 
class="form-check-input" data-hint="yes" type="checkbox" value='true' 
id="cada-form-student-financial-section-6-1-6" (change)="unselectAll()"> 
None of the Above

在您的 component.ts 文件中：

unselectAll() 
   this.form.patchValue(
   medicaidOrSssi: false,
   snap: false,
   freeOrReducedPriceLunch: false, 
   tanf: false,
   wic: false
 );

【讨论】：

这个解决方案效果很好。使用您的方法，我创建了另一个以放入其他复选框输入中，如果选择了任何其他框，则将取消选中“以上都不是”复选框。非常感谢！