FormArray 使用和动态添加控件行 [英] FormArray usage and dynamically add row of controls

问题描述

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

|__姓名_______|__电子邮件_______|
|__姓名___|__电子邮件___|

(+) 添加行

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

到目前为止，我的组件有

form:FormGroup;ngOnInit() {this.form = new FormGroup({受邀者:new FormArray([])});this.addInvitee();}添加被邀请人(){let control = <FormArray>this.form.controls['invitee'];control.push(new FormGroup({名称:new FormControl('', Validators.required),电子邮件:new FormControl('', Validators.required)}));}获取inviteArrayControl(): AbstractControl[] {let control = this.form.controls['invitee'] as FormArray;返回 control.controls;}

我的组件 HTML 有这个

<div [formGroupName]="i"><!-- 这是输入，但我不知道如何使用它们-->

<button (click)="addInvitee()">(+) 添加行</button>

解决方案

查看文档，https://angular.io/guide/reactive-forms#use-formarray-to-present-an-array-of-formgroups

<!-- 您的表格--><!--如果您的表单包含不是数组的字段，请放在这里<input formControlName="field_in_not_array">--><div formArrayName="被邀请人"><!-- 表单的表单数组--><!-- a *ngFor over form.get('invitee').controls --><div *ngFor="let address of form.get('invitee').controls; let i=index"[formGroupName]="i" ><!--这里是数组的字段--><input formControlName="name"/><input formControlName="email"/>

</表单><button (click)="addInvitee()">(+) 添加行</button><!--仅用于检查-->{{form?.value |json}}

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>

解决方案

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

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