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, Apr 30 '19 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, Apr 30 '19 at 13:33
What is `date.clone()`? Does it really gives a newDate and doesn't modify the existing date? — Ashish Ranjan, Apr 30 '19 at 13:35
date is a moment (mutable), yes clone makes a copy...https://momentjs.com/docs/#/parsing/moment-clone/ — Andrew Allen, Apr 30 '19 at 13:39
Yes, but still I don't know if that will work... Btw, I removed the comment, it was: Replace `var nextDate = ...` with `let nextDate = ...` — miselking, Apr 30 '19 at 13:41
@AndrewAllen Why do you have the same group pushed in the formArray? — Ashish Ranjan, Apr 30 '19 at 13:46

score 2 · Accepted Answer · answered Apr 30 '19 at 13:47

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 '19 at 13:47

Ashish Ranjan

12,760
5
27
51

Getting `ERROR TypeError: this.fb.group(...) is not a function` but accepted as at least I know now what's wrong – Andrew Allen Apr 30 '19 at 13:57
@AndrewAllen Isn't `FormBuilder` injected in your component as `fb`? – Ashish Ranjan Apr 30 '19 at 13:59
you mean like `constructor(private fb: FormBuilder, `? – Andrew Allen Apr 30 '19 at 14:00
@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? – Ashish Ranjan Apr 30 '19 at 14:03
1

just needed a semicolon. – Andrew Allen Apr 30 '19 at 14:03

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

1 Answers1