Angular formarray push formcontrol

Question

In my form I need to add companies, i want to save in the database a list of string with the company i added, the problem is that the value of the company in formarray is always empty

<button (click)="addNewCompany()">Add new Company</button><br><br>
<form [formGroup]="myForm">
    <div formArrayName="companies">
        <div *ngFor="let comp of getForm(); let i=index>
            <fieldset>
                <legend>
                    <h3>COMPANY {{i+1}}: </h3>
                </legend>
                <label>Company Name: </label>
                <input formControlName="comp" /><span><button (click)="deleteCompany(i)">Delete Company</button></span>
            </fieldset>
        </div>
    </div><br>
  </form>


export class AppComponent {
  myForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.myForm = this.fb.group({
      companies: this.fb.array([])
    });
  }

  getForm(): any {
    return this.myForm.get("companies")["controls"];
  }

  addNewCompany() {
    const control = <FormArray>this.myForm.get("companies");
    control.push(this.fb.control(''));
  }

  deleteCompany(index) {
    let control = <FormArray>this.myForm.controls.companies;
    control.removeAt(index);
  }

}

Stackblitz

Drenai · Accepted Answer · 2019-12-10 20:49:33Z

1

It's really handy that you added the StackBlitz demo too!

<input [formControlName]="i" />

As the items of the FormArray will have index's 0, 1, 2..., these become the formControlName values. You need to use the [] notation also, otherwise it uses i as a string, instead of using the property value of i, e.g. 0, 1

answered Dec 10, 2019 at 20:49

Drenai

12.6k9 gold badges60 silver badges94 bronze badges

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

2 Comments

akanzari Over a year ago

what the difference between [formControlName]="i" and formControlName="i"

Eliseo Over a year ago

when you use brakets, Angular evaluate the content between quotes, so [formControlName]="i", angular evaluate the "i" to 0,1,2.., if you write formControlName="i" Angular look for a control in your formControl with the name "i"

Collectives™ on Stack Overflow

Angular formarray push formcontrol

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related