Angular forms formArrayName directive usage

Question

The example in Angular official docs show the following code:

@Component({
  template: `
    <form [formGroup]="form">
      <div formArrayName="cities">
        <div *ngFor="let city of cities.controls; index as i">
          <input [formControlName]="i">
        </div>
      </div>
    </form>
  `,
})
export class NestedFormArray {
  form = new FormGroup({
    cities: new FormArray([
      new FormControl('SF'),
      new FormControl('NY'),
    ]),
  });

  get cities(): FormArray { return this.form.get('cities') as FormArray; }

}

I can't understand why we need the formArrayName directive when the code works even without it?

<form [formGroup]="form">
        <div *ngFor="let city of cities.controls; index as i">
          <input [formControlName]="i">
        </div>
 </form>

Buggy · Accepted Answer · 2018-10-03 14:06:18Z

2

<form [formGroup]="form">
        <div *ngFor="let city of cities.controls; index as i">
          <input [formControlName]="i">
        </div>
 </form>

It's not working without FormArrayName for structure like:

new FormGroup({
  cities: new FormArray([
    new FormControl('SF'),
    new FormControl('NY'),
  ]),
});

<input [formControlName]="i"> - says how to syncs a FormControl(input) to an existing <form [formGroup]="form">.

So it properly work for that structure:

new FormArray([
    new FormControl('SF'),
    new FormControl('NY'),
]);

edited Oct 3, 2018 at 14:06

answered Oct 3, 2018 at 13:22

Buggy

3,6691 gold badge23 silver badges38 bronze badges

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

3 Comments

undefined Over a year ago

I'm sorry, can't understand what you mean.

Buggy Over a year ago

TLDR without FormArrayName it will work for form = FormArray([new FormControl('SF'), new FormControl('NY')])

Buggy Over a year ago

Maybe i misunderstand you, check this example pls

Collectives™ on Stack Overflow

Angular forms formArrayName directive usage

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related