typescript - Få åtkomst till objektets egenskaper i en FormArray och uppdatera värdena i Angular 4

Jag vill få åtkomst till objektets egenskaper och binda värden från ett formulär. Hittills har jag provat olika alternativ men utan framgång. Detta är vad jag har hittills, jag har förenklat koden nedan:

Formulärgruppen:

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

View-koden:

<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>

Koden ovan är förenklad för detta frågesyfte, scenariot är annorlunda men i slutändan slutar det så här där jag vill uppdatera prisvärdet inuti objektet. Jag har sett många sätt att göra det medan jag gjorde min research men inget verkar fungera för mig.

Svar #1

Prova detta :-

  <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>

och ts :-

form: FormGroup;

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

Vänligen kolla denna plunker för lösningen. http://plnkr.co/edit/it3VW8wvYfYmk2Ox6M60?p=preview

Relaterade artiklar