FormArray的用法并动态添加控件行 [英] FormArray usage and dynamically add row of controls

问题描述

我在尝试使用Angular 2和Forms时遇到麻烦.
我有一个邀请列表，其中有两个字段，分别是名称和电子邮件，以及一个用于添加更多行的按钮.

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 _______ | __电子邮件_________ |
| __name _______ | __电子邮件_________ |

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

(+)添加行

我有点知道您可以使用FormArray动态存储不同的行等等，但是我不确定如何使用它并使它工作.

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;
}

我的HTML组件就有这个

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>

推荐答案

请参阅文档， 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}}

这篇关于FormArray的用法并动态添加控件行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！