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 l oop. В любом случае нужно ТОЛЬКО отображать указанное поле ввода c, если установлен один из флажков?

Например, флажок «Задание 1» = установленный ----> Поле ввода отображается флажок «Задание 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 является FormArray из FormControl, управляет собственным элементом управления, если наш formArray является formArray для formGroup. Мне нравится имя как let group of actForm.get('activity').controls, поэтому «group» - это formGroup

Обратите внимание, если у вас есть только FormArray, вам не нужно создавать группу Form, вы можете напрямую

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

и

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