Question

使用动态表单，我需要让用户能够动态创建表单字段。需要有一个＆＃39;添加＆＃39;按钮，当用户点击此按钮时，将创建4个输入字段。

到目前为止，我能够动态创建一个字段。以下是我的代码

在HTML中，我使用index来创建formControlName

<div class="row">
          <div class="col-xs-12">
            <div formArrayName="properties">

              <button class="btn btn-default btn-xs" type="button" (click)="onAddProperty()">Add</button>
              <div class="form-group" *ngFor="let propertyControl of searchForm.get('properties').controls; let i = index">
                <input type="text" class="form-control" [formControlName]="i">

                <!--       <input type="text" class="form-control" [formControlName]="'B'"+"i">
              <input type="text" class="form-control" [formControlName]="'C'"+"i">
              <input type="text" class="form-control" [formControlName]="'D'"+"i"> -->
              </div>
            </div>
          </div>
        </div>

然后在组件中，将控件推送到FormArray

searchForm: FormGroup;
onAddProperty() {
    const control = new FormControl(null);
    (<FormArray>this.searchForm.get('properties')).push(control);
  }

现在，我可以点击添加＆＃39;按钮任意次，每次点击都会创建一个输入字段。

但是，我需要为每次点击创建4个输入字段，而不是一个输入字段。我无法弄清楚如何给每个表单字段赋予唯一的formControlName。现在，我正在使用该字段的索引，该索引对于1个字段是唯一的，但对于4个字段则不是这样。

Answer 1

我认为这里有一个简单的for循环。至于你的模板，我在理解评论中的代码时遇到了一些麻烦（在模板中）。在这种情况下，除了在formArray的迭代中声明带有索引的formControlName之外，你不需要做任何其他事情，所以像这样：

<div formArrayName="properties">
  <div *ngFor="let prop of searchForm.get('properties').controls; let i=index">
    <input type="text" class="form-control" [formControlName]="i">
  </div>
</div>

然后插入4个新输入字段的循环：

onAddProperty() {
  for(var i=1; i<=4; i++) {
    <FormArray>this.searchForm.get('properties').push(new FormControl());
  }
}

<强> DEMO

Answer 2

您看到了这个链接Plunker

吗？

<form novalidate (ngSubmit)="onSubmit()" [formGroup]="users">
      <div formArrayName="data">
        <ng-container *ngFor="let user of fData.controls; index as i">
          <div [formGroupName]="i">
            <label>
              <span>Full name</span>
              <input type="text" placeholder="Name" formControlName="name">
            </label>
            <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('required')">
              Name is required
            </div>
            <div class="error" *ngIf="user.get('name').touched && user.get('name').hasError('minlength')">
              Minimum of 2 characters
            </div>
            <div formGroupName="account">
              <label>
                <span>Email address</span>
                <input type="email" placeholder="Email" formControlName="email">
              </label>
              <div
                class="error"
                *ngIf="user.get('account').get('email').hasError('required') && user.get('account').get('email').touched">
                Email is required
              </div>
              <label>
                <span>Confirm address</span>
                <input type="email" placeholder="Address" formControlName="confirm">
              </label>
              <div
                class="error"
                *ngIf="user.get('account').get('confirm').hasError('required') && user.get('account').get('confirm').touched">
                Confirming email is required
              </div>
            </div>
            <button type="submit" [disabled]="user.invalid">Sign up</button>
          </div>
        </ng-container>
      </div>
    </form>

Angular 2 Reactive表单 - 动态创建输入字段

2 个答案: