angularjs – 角度2动态嵌套形式

Here is a plunkr工作示例使用Angular2 RC3.

我正在使用从this document更新的Angular 2表单代码.

app.component.ts(包含表单)：

import { Component } from '@angular/core';
import {REACTIVE_FORM_DIRECTIVES,FormControl,FormGroup,FormArray} from '@angular/forms';

@Component({
  selector: 'my-app',templateUrl: 'app/app.html',directives: [REACTIVE_FORM_DIRECTIVES],providers:  []
})
export class AppComponent {
  form: FormGroup;
  myModel:any;

  constructor() {
    // initializing a model for the form to keep in sync with. 
    // usually you'd grab this from a backend API
    this.myModel = {
      name: "Joanna Jedrzejczyk",payOffs: [
        {amount: 111.11,date: "Jan 1,2016",final: false},{amount: 222.22,date: "Jan 2,final: true}
        ]
    }

    // initialize form with empty FormArray for payOffs
    this.form = new FormGroup({
      name: new FormControl(''),payOffs: new FormArray([])
    });

    // Now we manually use the model and push a FormGroup into the form's FormArray for each PayOff
    this.myModel.payOffs.forEach( 
      (po) => 
        this.form.controls.payOffs.push(this.createPayOffFormGroup(po))
    );
  }

  createPayOffFormGroup(payOffObj) {
    console.log("payOffObj",payOffObj);
    return new FormGroup({
      amount: new FormControl(payOffObj.amount),date: new FormControl(payOffObj.date),final: new FormControl(payOffObj.final)
    });
  }

  addPayOff(event) {
    event.preventDefault(); // ensure this button doesn't try to submit the form
    var emptyPayOff = {amount: null,date: null,final: false};

    // add pay off to both the model and to form controls because I don't think Angular has any way to do this automagically yet
    this.myModel.payOffs.push(emptyPayOff);
    this.form.controls.payOffs.push(this.createPayOffFormGroup(emptyPayOff));
    console.log("Added New Pay Off",this.form.controls.payOffs)
  }

  deletePayOff(index:number) {
    // delete payoff from both the model and the FormArray
    this.myModel.payOffs.splice(index,1);
    this.form.controls.payOffs.removeAt(index);
  }
}

请注意,我手动将新的FormGroup对象推送到Form.Array对象中的form.controls.payOffs数组中.

app.html(包含表单html)：

<form (ngSubmit)="onSubmit()" [formGroup]="form">

    <label>Name</label>
    <input type="text" formControlName="name" [(ngModel)]="myModel.name" placeholder="Name">

    <p>Pay Offs</p>
    <table class="simple-table">
      <tr>
        <th>Amount</th>
        <th>Date</th>
        <th>Final?</th>
        <th></th>
      </tr>
    <tbody>
      <tr *ngFor="let po of form.find('payOffs').controls; let i = index">
        <td>
          <input type="text" size=10 [formControl]="po.controls.amount" [(ngModel)]="myModel.payOffs[i].amount">
        </td>
        <td>
          <input type="text" [formControl]="po.controls.date" [(ngModel)]="myModel.payOffs[i].date">
        </td>
        <td>
          <input type="checkBox" [formControl]="po.controls.final" [(ngModel)]="myModel.payOffs[i].final">
        </td>
        <td>
          <button (click)="deletePayOff(i)" style="color: white; background: rgba(255,.5)">x</button>
        </td>
      </tr>
    </tbody>
    <tr>
      <td colspan="4" style="text-align: center; padding: .5em;">
        <button (click)="addPayOff($event)" style="color: white; background: rgba(0,150,1)">Add Pay Off</button>
      </td>
    </tr>
    </table>

  </form>

在html表单中,我将表单链接到输入的模型,如下所示：

... [formControl]="po.controls.amount" [(ngModel)]="myModel.payOffs[i].amount" ...