angular - 如何将 FormControl 的值显示为标签？

Question

我有包含 FormArray 的 FormGroup。由系统生成的 FormArray 中的每个 FormControls 如下所示:

   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 中显示所有员工，但我不知道如何在标签内显示员工名称。

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。

Answer 1

在你的 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>