Angular FormArray Insert

Question

I am trying to update a specific value on an formArray using insert(). I initialize form on ngOninit() like this:

this.myForm = this.fb.group({
    exercises: this.fb.array([]),
    type: new FormControl(),
    day: new FormControl(),
    sets: this.fb.array([]),
    reps: this.fb.array([]),
});

I have an input where on change i call the below function but when i try to insert a new value with the array's index I get the value pushed.

onSetsChange(sets, index){
  var setsFormArray = <FormArray>this.myForm.controls.sets;
  setsFormArray.insert(index, new FormControl(sets));
}

The html code is below:

<div class="col-md-3">
  <select class="form-control input-sm" (change)="onSetsChange($event.target.value, exerciseIndex)">
     <option *ngFor="let set of sets; let i = index;">{{set}}</option>
  </select>
</div>

The exerciseIndex I pass is from a loop that it doesn't show up.

What i am doing wrong and the value it's not updating? Thank you

Why don't you just use two way data binding via [(ngModel)] for working with values? — P.S.
– P.S., Commented Sep 27, 2017 at 12:12
@CommercialSuicide because FormControls are way more powerful and clear? — smnbbrv
– smnbbrv, Commented Sep 27, 2017 at 12:15
@oMpamparos your problem is not clear. Why do you use index from one array to insert the values by the same index into another array? Probably you should transfer your FormArray into FormGroup if you want to keep the values by the same index — smnbbrv
– smnbbrv, Commented Sep 27, 2017 at 12:19
Yea I am trying to update a Form array's element on click. I am angular newbie and I read that formControls are the best choice to build forms. Any idea why I can't update the array's element? — kanelloc
– kanelloc, Commented Sep 27, 2017 at 12:19
@smnbbrv I am trying with the outer index which is the exerciseIndex to update sets array element with the same index from myForm group. — kanelloc
– kanelloc, Commented Sep 27, 2017 at 12:21

kanelloc · Accepted Answer · 2022-12-22 13:46:54Z

1

onSetsChange(sets, index){
    var setsFormArray = <FormArray>this.myForm.controls.sets;
    (setsFormArray.at(index)).patchValue(sets);
    console.log(index);
    console.log(setsFormArray);
}

this is another solution I figured out. Thank you

edited Dec 22, 2022 at 13:46

answered Sep 27, 2017 at 13:37

kanelloc

2474 silver badges16 bronze badges

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

Comments

Joe Keene · Accepted Answer · 2017-09-27 13:29:05Z

0

Try using patchValue :-

public ngOnInit() {
    const arr = new FormArray([
                new FormControl(),
                new FormControl()
            ]);

    let control = arr.controls[0];
    setTimeout(() => control.patchValue("new-val"), 250); // Set value to "new-val"
    setTimeout(() => console.log(control.value), 350); // Logs "new-val"
}

edited Sep 27, 2017 at 13:29

answered Sep 27, 2017 at 13:07

Joe Keene

2,36124 silver badges29 bronze badges

4 Comments

kanelloc Over a year ago

I don't want to push the new value. I want to update the old value with the new one.

Joe Keene Over a year ago

So you want to change the FormControl or change the value of the FormControl?

kanelloc Over a year ago

I want to change the form control value which is inside form array by it's index

Joe Keene Over a year ago

Use patch value? - Updated my answer

Collectives™ on Stack Overflow

Angular FormArray Insert

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related