访问 FormArray 中的对象属性并更新 Angular 4 中的值答案

【问题标题】：Access object properties in a FormArray and update the values in Angular 4访问 FormArray 中的对象属性并更新 Angular 4 中的值
【发布时间】：2018-04-28 03:16:51
【问题描述】：

我想从表单访问对象属性和绑定值。到目前为止，我尝试了不同的选择，但没有成功。这是我到目前为止所拥有的，我已经简化了以下代码：

表单组：

this.form = this.fb.group({
  ingredients: new FormArray([this.fb.group({name: 'Pasta', price: ''})])
})

查看代码：

<div formArrayName="ingredients">
  <ion-item *ngFor="let ingredient of form['controls'].ingredients['controls']; let i = index" padding-bottom>
    <div [formGroupName]="i">
        <ion-input formControlName="price" type="number"></ion-input>
    </div>
  </ion-item>
</div>

上面的代码是为了这个问题而简化的，场景不同，但最后会像这样我想更新对象内部的价格值。在我进行研究时，我已经看到了很多方法，但似乎没有什么对我有用。

【问题讨论】：

这段代码有什么问题？`

标签： angular typescript reactive-forms formarray

【解决方案1】：

试试这个：-

  <form [formGroup]="form">
  <div formArrayName="ingredients">
    <div *ngFor="let ingredient of form['controls'].ingredients['controls']; let i = index" [formGroupName]="i">
    <input formControlName="price" type="number"/>
    </div>
    </div>
  </form>

和 ts :-

form: FormGroup;

  constructor(builder: FormBuilder) {
    this.form = builder.group({
      ingredients: new FormArray([
        builder.group({
            name: 'Pasta',
            price: '',
        })
      ]);
    })
  }

请检查此 plunker 以获取解决方案。 http://plnkr.co/edit/it3VW8wvYfYmk2Ox6M60?p=preview

【讨论】：

我整天都在处理这个问题。这就像一个魅力。谢谢