How to loop over Angular FormArray - currently sets as last item in loop

Question

I'm trying to loop though a FormArray setting values. Fairly new to javascript.

Below TeamWorkingDate is set to the same date for each of the 7 FormGroup's in the Team FormArray, and is set to the last in the loop, date + 7 days.

I've tried many variations of forEach and answers @ JavaScript closure inside loops – simple practical example as I believe this must be some closure issue.

My understanding of closures is limited despite reading up on this. In this instance - is it that setValue has access to the variable i outside the function call and so is 'seeing' i = 7? I thought let stops this issue?

  setDates(date: moment) {
    var arr = [];
    for(let i = 0; i < 7; i++) {
      let nextDate = date.clone().add(i, 'day');
      arr.push(nextDate);
      (<FormArray>this.myForm.get('Teams')).controls[i]
        .get('TeamWorkingDate').setValue(arr[i]);
    }
  }

My Form:

  ngOnInit() {
    this.myForm = this.fb.group({
      Teams: this.fb.array([])
    });
    const team = this.fb.group({
      TeamWorkingDate: '',
      ...
    })
    for (let i = 0; i < 7; i++) {
      (<FormArray>this.myForm.get('Teams')).push(team);
    }
  }

EDIT: changed to let nextDate = date.clone().add(i, 'day'); instead of var

Yes, let stops the issue you are talking about and IMK, setValue() is not an async call, so that shouldn't event be a problem. What is the issue you are facing can you explain more, I didn't get the question. — Ashish Ranjan
– Ashish Ranjan, Commented Apr 30, 2019 at 13:29
I want to set the TeamWorkingDate, a FormGroup in a FormArray (7 appended OnInit) to date, date+1 day, etc but I'm just getting this set to date+7 days for all of them. — Andrew Allen
– Andrew Allen, Commented Apr 30, 2019 at 13:33
What is date.clone()? Does it really gives a newDate and doesn't modify the existing date? — Ashish Ranjan
– Ashish Ranjan, Commented Apr 30, 2019 at 13:35
date is a moment (mutable), yes clone makes a copy...momentjs.com/docs/#/parsing/moment-clone — Andrew Allen
– Andrew Allen, Commented Apr 30, 2019 at 13:39
@AndrewAllen Why do you have the same group pushed in the formArray? — Ashish Ranjan
– Ashish Ranjan, Commented Apr 30, 2019 at 13:46

Ashish Ranjan · Accepted Answer · 2019-04-30 13:47:46Z

2

Currently all the formGroups in the formArray are pointing to the same FormGroup reference, so changing value at any index will effectively update the same group. Create and push new FormGroups in the formArray.

 ngOnInit() {
    this.myForm = this.fb.group({
      Teams: this.fb.array([])
    });
    for (let i = 0; i < 7; i++) {
      const team = this.fb.group({
      TeamWorkingDate: '',
        ...
      })
      (<FormArray>this.myForm.get('Teams')).push(team);
    }
  }

answered Apr 30, 2019 at 13:47

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

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

5 Comments

Andrew Allen Over a year ago

Getting ERROR TypeError: this.fb.group(...) is not a function but accepted as at least I know now what's wrong

Ashish Ranjan Over a year ago

@AndrewAllen Isn't FormBuilder injected in your component as fb?

Andrew Allen Over a year ago

you mean like constructor(private fb: FormBuilder, ?

Ashish Ranjan Over a year ago

@AndrewAllen yes, thats correct. It of type FormBuilder and of course that is why you have been able to create the form and add values to it. It may be just your editor which might not be recognizing the type. You aren't getting any compiletime/runtime errors right?

Andrew Allen Over a year ago

just needed a semicolon.

Collectives™ on Stack Overflow

How to loop over Angular FormArray - currently sets as last item in loop

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related