Question

我试图提示用户为他们想要的每个客人填写表格（只是姓名，成绩和年龄）。我先问他们有多少客人。然后在下一页上，我想向用户显示许多表单。

像这样：

＆＃13;

<ion-list *ngFor="let item of numberOfGuests">
    <ion-item>
      <ion-label>Full name</ion-label>
      <ion-input type="text"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Age</ion-label>
      <ion-input type="number"></ion-input>
    </ion-item>
    <ion-item>
      <ion-label>Grade</ion-label>
      <ion-input type="number"></ion-input>
    </ion-item>
  </ion-list>

＆＃13;

以上显然不起作用。我只是以此为例。我希望根据用户想要带多少客人来创建每个列表或输入形式。

这在Angular 2中是否可行？是否可以基于数字在html中动态创建表单？

Answer 1

我会采用反应形式，就像Ajmal建议的那样。

因此，当您拥有应在模板中呈现多少个guest虚拟机的值时，只需将多个表单组推送到表单数组：

constructor(public navCtrl: NavController, private fb: FormBuilder) {
  // build form
  this.myForm = fb.group({
    // declare empty form array
    guests: fb.array([])
  })
  // here we push form groups to formarray
  this.addGuests();
}

addGuests() {
  let formArr = this.myForm.controls.guests as FormArray;
  // 'amountOfGuests' is the amount of guests you want rendered
  for(let i = 1; i <= this.amountOfGuests; i++) {
    formArr.push(this.fb.group({
      fullName: [''],
      age: [''],
      grade: ['']
    }))
  }
}

然后你只需在模板中重复表单数组（缩短代码）：

<form [formGroup]="myForm">
  <ng-container formArrayName="guests">
    <ion-list *ngFor="let guest of myForm.controls.guests.controls; let i = index" [formGroupName]="i">
      <ion-item>
        <ion-label>Full name</ion-label>
        <ion-input formControlName="fullName"></ion-input>
      </ion-item>    
    </ion-list>
  </ng-container>
</form>

这是 DEMO :)

Answer 2

如果您的要求是创建动态字段，请执行以下操作。

为此，请将表单控制器作为数组。

    this.myForm = this._fb.group({
                name: ['', [Validators.required, Validators.minLength(5)]],
                addresses: this._fb.array([
                    this.initAddress(),
                ])
            });

initAddress() {
        return this._fb.group({
            street: ['', Validators.required],
            postcode: ['']
        });
    }

    addAddress() {
        const control = <FormArray>this.myForm.controls['addresses'];
        control.push(this.initAddress());
    }

    removeAddress(i: number) {
        const control = <FormArray>this.myForm.controls['addresses'];
        control.removeAt(i);
    }

此处addresses是一个动态字段。

然后创建像这样的HTML代码。

<div formArrayName="addresses">
          <div *ngFor="let address of myForm.controls.addresses.controls; let i=index" class="panel panel-default">
            <div class="panel-heading">
              <span>Address {{i + 1}}</span>
              <span class="glyphicon glyphicon-remove pull-right" *ngIf="myForm.controls.addresses.controls.length > 1" (click)="removeAddress(i)"></span>
            </div>
            <div class="panel-body" [formGroupName]="i">
              <address [group]="myForm.controls.addresses.controls[i]"></address>
            </div>
          </div>
        </div>

有关详细信息，请参阅此示例https://embed.plnkr.co/LHWlcdC06xisANRZ0NeV/

在Angular2中动态创建输入表单

2 个答案: