取消选中角度7的表单组中的所有框 [英] Uncheck all boxes in form group in angular 7

问题描述

我需要在一个表单组中有一个复选框，以使unchecks所有checkboxes都在同一表单组中，并保持我的验证.

I need to have one check box in a form group that unchecks all checkboxes in the same form group as well as keep my validation.

在我的 TS文件中，我有:

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

在我的 HTML 中，我有以下内容:

In my HTML I have this:

<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

I need the last input field to ONLY uncheck all other checkboxes in this form group,

我还需要保持验证，使用ngModel引起的问题，因为我的表格controls无法注册.

I also need to be able to keep my validation as well, using ngModel caused issues with that since my form controls were not able to be registered.

推荐答案

您可以将最后一个复选框保留为自己的控件(未注册到表单组)，并仅侦听该复选框上的change事件: 例如:

You can keep the final checkbox as it's own control (not registered to the form group) and just listen to the change event on that checkbox: E.g:

<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文件中:

In your component.ts file:

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

这篇关于取消选中角度7的表单组中的所有框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！