javascript - 在 HTML 的响应式表单中从 formArray 访问 formControl 的值

如何在 HTML 中访问 ItemName 的值。当我在下面的代码中尝试 {{invoiceForm.controls[i].items.controls.itemName.value | json}} 时，它显示未定义。

<form [formGroup]="invoiceForm">

<div formArrayName="items" *ngFor="let item of items.controls; let i=index;">

  <div [formGroupName]="i">
      <input type="text" formControlName="itemName">
      <input type="number" formControlName="itemQty">       
      <input type="number" formControlName="itemPrice">
  </div>  

  Item name:  {{invoiceForm.controls[i].items.controls.itemName.value | json}}

</div>
</form>

答案＃1

你几乎到了…

而不是：

{{invoiceForm.controls[i].items.controls.itemName.value | json}}

你应该写：

{{invoiceForm.controls['items'].controls[i].controls.itemName.value | json}}

StackBlitz 示例

为了准确地说明要走的路径，你只需在 ngOnInit 中使用 console.log(this.invoiceForm) 打印表单值，然后你就会看到 'item' 是 'controls' 的直接键，你唯一的错误是引用了 invoiceForm.controls[0]，这是错误的。

这里有一点额外内容，用于从 ts 文件实现相同的结果（硬编码为第一个项目）：

console.log(this.invoiceForm);
const itemControls = <FormArray>this.invoiceForm.controls['items'];
const itemFormGroup = <FormGroup>itemControls.controls[0];
console.log(itemFormGroup.controls["itemName"].value);

答案＃2

而不是 {{invoiceForm.controls[i].items.controls.itemName.value | json}}

在 HTML 中尝试这个：

{{getFormControlItem()[i].controls['dateofStay'].value}}

组件 ts 代码：

getFormControlItem()
{
return ((this.invoiceForm.controls['items'] as FormArray).controls as FormGroup[])
}

这不会抛出此错误：类型 'AbstractControl' 上不存在属性 'controls'。

在我的情况下，这个有效。