Access object properties in a FormArray and update the values in Angular 4

Question

I want to access the object properties and bind values from a form. So far i have tried different options but no success. This is what i have so far, i have simplified the code below:

The FormGroup:

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

The View code:

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

The code above is simplified for this question purpose, the scenario is different but at the end ends up like this where i want to update the price value inside the object. I have seen a lot of ways of doing it while i did my research but nothing seems to work for me.

what is the problem with this code?`

AVJT82
– AVJT82

2017-11-19 10:48:08 +00:00
Commented Nov 19, 2017 at 10:48 — AVJT82
– AVJT82, Commented Nov 19, 2017 at 10:48

crystalthinker · Accepted Answer · 2017-11-27 09:52:56Z

5

Try this :-

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

and ts :-

form: FormGroup;

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

Please check this plunker for the solution. http://plnkr.co/edit/it3VW8wvYfYmk2Ox6M60?p=preview

answered Nov 27, 2017 at 9:52

crystalthinker

1,19216 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

DJ Burb Over a year ago

I spent all day with this issue. This worked like a charm. Thanks

Collectives™ on Stack Overflow

Access object properties in a FormArray and update the values in Angular 4

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related