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>

如何显示FormControl的值来标记？

1 个答案: