javascript - FormArray的用法并动态添加控件行

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

| __name _______ | __电子邮件_______ ||
| __name _______ | __电子邮件_______ ||

（+）添加行

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

到目前为止，我有

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有这个

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

关于javascript - FormArray的用法并动态添加控件行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51094563/