Реактивная форма Angular 2 с флажками

Недавно я пытался понять, как работают эти реактивные формы. Однако основные примеры (без вложенности и т. д.) понятны, если у меня есть такая структура формы с флажками:

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

Как мне отобразить его в шаблоне, чтобы изменить значение «*checked» (true | false)?


javascript angular reactive-forms
person marcineck    schedule 26.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете сделать что-то вроде этого:

  <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

person AngularChef    schedule 26.02.2017