Angular 2 - 处理多个复选框选中状态

Question

我正在构建一个注册表单，并且必须处理通过 *ngFor 结构指令生成的多个复选框。

模板：

<div class="form-group">
        <label class="col-lg-3 control-label">Response Type</label>
        <div class="col-lg-7">
          <div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
            <label>
              <input type="checkbox" name="responseTypes" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
            </label>
          </div>
        </div>
      </div>

TS 模型对象：

client.responseTypes = [
{ value: 'type1', checked: false},
          { value: 'type2', checked: true },
          { value: 'type3', checked: true }
];

选中或未选中的场景背后的实际值被正确存储。但是，复选框没有显示正确的值。

• 如果三个 objects.checked 之一 == false，则所有复选框都将显示为未选中
• 仅当所有三个objects.checked == true 时，才会在表单中检查所有三个。

我尝试在输入元素上摆弄[value]="client.responseTypes[i].checked" 和[checked]="client.responseTypes[i].checked"，但没有成功。

非常感谢任何正确方向的指针。

问候，克里斯

Answer 1

语法没问题，嗯，你也可以

<input type="checkbox" name="responseTypes" [(ngModel)]="type.checked">

问题出在其他地方（当你定义客户端时-我想你写了一些像this.client.responseTypes = ...-），你可以写

{{client |json }}

检查一下

Answer 2

好吧，在试图弄清楚为什么我的本地应用程序没有显示我想要的结果之后，我开始将我的表单组复制并粘贴到它所在的 <form></form> 元素之外。

Ta-daa，它现在可以工作了。

仅供参考：在 <form></form> 元素中放置 *ngFor 复选框会导致不需要的行为。

Answer 3

在 Angular 中，每个模型都与 name 绑定，这意味着您需要为每个 Form 元素赋予唯一的名称`

例如：

<div class="form-group"><label class="col-lg-3 control-label">Response Type</label>
    <div class="col-lg-7">
      <div class="checkbox" *ngFor="let type of client.responseTypes; let i = index">
        <label>
          <input type="checkbox" name="type.id" [(ngModel)]="client.responseTypes[i].checked" /> {{type.value}}
        </label>
      </div>
    </div>
  </div>

对象：

client.responseTypes = [{id: '1', value: 'type1', checked: false},
      {id: '2', value: 'type2', checked: true },
      {id: '3', value: 'type3', checked: true }];

现在检查:) 谢谢