How to reference individual controls of a FormArray

Question

I am stuck on what i need to use as the formControlName for my arrays in my reactive form, I want the array to be [1,2,3] but i want to to be able to add and delete from the array but also have multiple arrays, I can get it to work if I create new arrays and set the arrays from outside the form but i dont feel it will be very scale able if i make a large form, thanks for the help

Ive tired making the formControlName="{{j}}" and i still get an empty value when i console log the array

this.multiplerForm = this.fb.group({
  multipliers: this.fb.array([
    this.fb.group({
      reps: this.fb.array([]),
    })
  ])
});

addReps(control){
    control.push((this.fb.control('')));
}

removeReps(control,index: number) {
    control.removeAt(index);
}

<StackLayout formArrayName="reps">
    <GridLayout rows="*" columns="*,*,*" *ngFor="let rep of multiplier.get('reps').controls;  let j=index" [formGroupName]="j"  >
        <Label col="0" text="Set {{j+1}}" ></Label>
        <TextField col="1" formControlName="{{j}}" ></TextField>
        <Button col="2" text="X" (tap)="removeReps(multiplier.controls.reps,j)"></Button>
    </GridLayout>
</StackLayout>

if you want to go with a formArray like `this.fb.array` suggests there is no way, since FormArrays do have a name but each individual control in it doesn't, they can only be adressed by their index. If you do want control over the names I would advise to go with a FormGroup. What are you trying to acomplish specificly? — Chund, Feb 28 '20 at 11:37
I want to create a form with multiple weeks and have an have an array for each, i will only be controlling the array by its index, it just when i type my value into the textfield and console log it it gives me Cannot find control with path: 'multipliers -> 0 -> reps -> 0 -> 0' week: { "type": "", "multipliers": [ { "name": "Multipler Week 1", "reps": [ ], "weights": [ ] } ] } — Darian van der Merwe, Feb 28 '20 at 11:41
sounds to me like you could answer your question by reading this: https://stackoverflow.com/questions/44756530/how-to-access-control-in-html-defined-inside-formarray-in-component-angular2 — Chund, Feb 28 '20 at 11:48
@Chund, a formArray can be a FormArrays of formControls or a FormArray of FormGroups, the "tags" to manage are differents — Eliseo, Feb 28 '20 at 12:44

score 2 · Accepted Answer · answered Feb 28 '20 at 12:43

Darian a FormArray can be a FormArray of FormGroups or a FormArrays of FormControls. You has a Formarray of FormControls, so you use [formControlName]="i", NOT [formGroupName]="i"

<div *ngFor="let rep of multiplier.get('reps').controls; let i=index">
    <label>
      Alias:
      <input type="text" [formControlName]="i">
    </label>
  </div>

How to reference individual controls of a FormArray

1 Answers1