javascript - 带有复选框的 Angular 2 Reactive Form

Question

最近我一直在试图弄清楚这些 react 形式是如何工作的。基本示例(无嵌套等)是可以理解的，但是如果我有一个像这样带有复选框的表单结构:

  {
  "username": "",
  "damnIt": "",
  "checkboxes": [
    {
      "checked": false,
      "name": "Checked1",
      "value": 10
    },
    {
      "checked": false,
      "name": "Checked1",
      "value": 11
    },
    {
      "checked": false,
      "name": "Checked1",
      "value": 12
    }
  ]
}

我应该如何在模板上呈现它才能更改“*checked”值(true | false)？

Answer 1

你可以这样做:

  <form #theForm="ngForm" (ngSubmit)="submitForm(theForm.value)">

      <div *ngFor="let cb of data.checkboxes">
        <label>
          <input type="checkbox" [name]="cb.name" [(ngModel)]="cb.checked">{{cb.value}}
        </label>
      </div>

    <button type="submit" class="btn btn-primary">Submit</button>
  </form>

  <pre>{{data.checkboxes|json}}</pre>

参见 Plunkr:https://plnkr.co/edit/MpSO21fIJq1DtJoXmE3V?p=preview