CODEWITHSUNDEEP
javascriptangularangular2-forms
João Ghignatti
João Ghignatti

Reputation: 2391

FormArray usage and dynamically add row of controls

I'm having trouble trying to do something with Angular 2 and Forms.
I have let's say an invitation list, where there are two fields, for name and e-mail, and a button to add more rows.

|__name_______|__e-mail_______|
|__name_______|__e-mail_______|

(+) Add row

And I kinda know that you can use FormArray to dynamically store different rows and so, but I'm not sure how to use it and to make it work.

So far at my component I have

form:FormGroup;
ngOnInit() {
    this.form = new FormGroup({
      invitee: new FormArray([])
    });
    this.addInvitee();
}

addInvitee() {
    let control = <FormArray>this.form.controls['invitee'];
    control.push(new FormGroup({
      name: new FormControl('', Validators.required),
      email: new FormControl('', Validators.required)
    }));
}

get inviteeArrayControl(): AbstractControl[] {
    let control = this.form.controls['invitee'] as FormArray;
    return control.controls;
}

And I have this for my component HTML

<div *ngFor="let discounts of discountsArrayControl;let i = index">
    <div [formGroupName]="i">
        <!-- Here goes the inputs but I don't know how to use them -->
    </div>
</div>
<button (click)="addInvitee()">(+) Add row</button>

Upvotes: 2

Views: 3916

Answers (1)

Eliseo
Eliseo

Reputation: 57939

See the docs, https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

<form [formGroup]="form" (submit)="submit(form)"> <!-- your form-->
    <!--if your form has fields that they are not array, put here
    <input formControlName="field_in_not_array">
    -->
    <div formArrayName="invitee"> <!-- the Form Array of your form-->
        <!-- a *ngFor over form.get('invitee').controls -->
        <div *ngFor="let address of form.get('invitee').controls; let i=index" 
                [formGroupName]="i" >
           <!--here the fields of the array-->
           <input formControlName="name"/> 
           <input formControlName="email"/>
        </div>
     </div>
</form>
<button (click)="addInvitee()">(+) Add row</button>
<!--only to check-->
{{form?.value |json}}

Upvotes: 2

Related Questions