Блог

У меня есть FormGroup, которая содержит FormArray. Каждый FormControls в FormArray генерируется системой, поэтому он выглядит следующим образом:

    staffs: FormArray =  { staffs: [
    {id: 1, staffName: "Jimmy", staffRate: 10},
    {id: 2, staffName: "Steffan", staffRate: 20},
    {id: 3, staffName: "Devon", staffRate: 30},
    {id: 4, staffName: "Jonah", staffRate: 50}
    ]}
  

Теперь я хочу отобразить весь персонал в компоненте html, но я понятия не имею, как отобразить staffName внутри метки.

html-код выглядит следующим образом

 get staffsFA(): FormArray {
  return this.form.get('staffs') as FormArray ;
}  

 <form [fromGroup]="form">
....
<ng-container formArrayName="staffs">
  <ng-container *ngFor="let sdr of staffsFA.controls; let i=index;">
    <div class="row" [formGroupName]="i">
      <label>[I want staff name in here]</label>
      <input type='text' formControlName="staffRate">
    </div>
  </ng-container>
</ng-container>
....
< /form>  

Примечание: я использую Angular 7.

В вашем component.ts,

Вы можете получить доступ к значениям элементов управления формой, определенным в вашей реактивной форме, выполнив что-то вроде этого:

 console.log(this.staffs.value)
  

В случае доступа к значениям каждого элемента в FormArray вы можете сделать это:

 console.log(this.staffs['controls']['staffs']['controls'].value)
  

Или

 console.log(this.staffsFA.value)
  

Аналогично, на вашем component.html вы можете получить доступ к отдельным значениям элемента управления формой, используя интерполяцию шаблона:

    <ng-container *ngFor="let sdr of staffsFA.controls; let i=index;">
    <div class="row" [formGroupName]="i">
      <label>{{ sdr.value.staffName }}</label>
      <input type='text' formControlName="staffRate">
    </div>
  </ng-container>