Angular 8：根据选中的复选框显示/隐藏输入

Question

我正在尝试将输入字段绑定到从 API 生成的复选框字段列表。 如下代码所示，它将生成 7 个复选框字段。

  <form [formGroup]="actForm">
                <mat-label class="activityCheckBox"
                  formArrayName="func1Activities"
                  *ngFor="let act of actForm.controls.activity.controls; let i = index;">
                  <tpcr-input-checkbox [formControlName]="i"></tpcr-input-checkbox>
                  {{activity[i].Name}}

                  <mat-form-field ngDefaultControl class="example-full-width" type="number">
                    <input matInput class="timeInput" type="number"
                      [(ngModel)]="formProfile.timeSpent" [ngModelOptions]="{standalone:true}">
                  </mat-form-field>

                </mat-label>
  </form>

现在，输入字段都与 ngFor 循环中的活动复选框一起生成。如果选中其中一个复选框，是否只显示特定的输入字段？

例如Activity 1 Checkbox = checked ----> 出现输入字段 活动 2 复选框 = 未选中 ---> 隐藏输入字段

这困扰了我一段时间，非常感谢您的时间和帮助！

谢谢。

Answer 1

你有这样的表格

actForm=new FormGroup({
  activity=new FormArray([new FormControl(),new FormControl()]
})

所以，你可以像访问 *ngFor 一样

actForm.get('activity').at(i).value

或

act.value

当您遍历let control of actForm.get('activity').controls 控件时，如果我们的formArray 是FormControls 的FormArray，则它自己的控件-如果我们的formArray 是formGroup 的formArray，我喜欢名称为let group of actForm.get('activity').controls，所以“组”是formGroup

注意，如果你只有一个FormArray你不需要创建一个formGroup，你可以直接

  activity:FormArray=new FormArray([new FormControl(),new FormControl()]

和

 <div *ngFor="let control of activity.controls;let i=index">
     <input [formControl]="control">
 </div>