时间戳

首页 > 解决方案 > Angular Reactive 表单多个复选框在第二次访问期间显示为已选中，尽管某些值为 false

angular - Angular Reactive 表单多个复选框在第二次访问期间显示为已选中，尽管某些值为 false

问题描述

我正在使用带有反应形式（FormControl）的角度 4 材料设计，其中包括多个复选框。在第一次访问期间，所有复选框都显示正确的值。但是在第二次访问期间，虽然某些复选框值是错误的，但 UI 显示所有复选框都已选中。HTML 和 Javascript 代码 

    <mat-step [stepControl]="thirdFormGroup">
      <form [formGroup]="thirdFormGroup">
          <ng-template matStepLabel>MHE Facilities</ng-template>


     <mat-checkbox formControlName="Allopathy"  name="Allopathy">Allopathy</mat-checkbox><br>
     <mat-checkbox formControlName="Ayurveda"  name="Ayurveda">Ayurveda</mat-checkbox><br>
     <mat-checkbox formControlName="Homeopathy"  name="Homeopathy">Homeopathy</mat-checkbox><br>
     <mat-checkbox formControlName="Unani"  name="Unani">Unani</mat-checkbox><br>
     <mat-checkbox formControlName="Siddha"  name="Siddha">Siddha</mat-checkbox><br>
    </form>
            </mat-step>

表单生成器代码：

    this.thirdFormGroup = this._formBuilder.group({
     Allopathy : new FormControl(this.allopathy),
  Ayurveda : new FormControl(this.ayurveda),
  Homeopathy : new FormControl(this.homeopathy),
  Unani: new FormControl(this.unani),
  Siddha: new FormControl(this..siddha),
});

将值绑定回表单控件：

     this.thirdFormGroup.patchValue({
     Allopathy : this.mheAppData.system_practice[0].checked,
     Ayurveda :this.mheAppData.system_practice[1].checked,
     Homeopathy :this.mheAppData.system_practice[2].checked,
     Unani :this.mheAppData.system_practice[3].checked,
     Siddha :this.mheAppData.system_practice[4].checked,
    });

标签： angularangular-reactive-forms

解决方案

推荐阅读