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

问题描述

我需要在表单组中有一个复选框，它取消选中同一表单组中的所有复选框并保留我的验证.

在我的 TS 文件中，我有:

 initForm() {this.financialSectionSix = this.formBuilder.group({medicaidOrSssi: [假],快照:[假]，freeOrReducedPriceLunch:[假]，tanf: [假],wic: [假],noneOfTheAbove: [假]});}

在我的 HTML 中，我有这个:

<div [hidden]="selectedSectionGroup.sectionSix" class="tab-pane淡出显示积极的"id="{{financialSectionEnum.SECTION_SIX}}" role="tabpanel"><form [formGroup]="financialSectionSix"><label class="form-check-label" for="financial1"><输入需要的formControlName="medicaidOrSssi" id="medicaidOrSssi"类=表单检查输入"data-hint="yes" type="checkbox" value="true">医疗补助或补充保障收入 (SSI)<label class="form-check-label" for="form-student-financial-第 6-1-2 节"><input required formControlName="snap" id="snap" class="form-check-输入"数据提示=是"类型=复选框"值='真'>食品券或补充营养援助计划 (SNAP)<label class="form-check-label" for="form-student-financial-第 6-1-6 节"><输入需要的formControlName="noneOfTheAbove" id="noneOfTheAbove"class="form-check-input" data-hint="yes" type="checkbox" value='true'id="form-student-financial-section-6-1-6">以上都不是</表单>

我需要最后一个输入字段来仅在此表单组中取消选中所有其他复选框，

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

解决方案

您可以保留最后一个复选框，因为它是自己的控件(未注册到表单组)，只需监听该复选框上的更改事件:例如:

以上都不是

在您的 component.ts 文件中:

unselectAll() {this.form.patchValue({medicaidOrSssi:假，快照:假，freeOrReducedPriceLunch:假，tanf:假的，维克:假});}

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.

In my TS file i have:

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

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>

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

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.

解决方案

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

In your component.ts file:

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

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