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> 元素中复制并粘贴我的表单组。

哒哒，现在可以了。

FYI: Placing *ngFor checkboxes inside a <form></form> element results in unwanted behaviour.

Answer 3

在angular中，每个模型都绑定了名称，这意味着您需要为每个表单元素指定唯一的名称`

例如：

<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 }];

现在检查 :) 谢谢

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

Angular 2 - Handling multiple checkboxes checked state

forms

checkbox

ngfor

angular