Question

我想创建一个复选框列表，如下所示。我想显示一个复选框和名称，并在提交时我希望获得所有选定的值。我无法显示名称并在复选框上设置所选值。

# Unordered
list(set(seq))
# Out: ['thenandnow', 'PBS', 'debate', 'job', 'nowplaying']

# Order-preserving
list(OrderedDict.fromkeys(seq))
# Out: ['nowplaying', 'PBS', 'job', 'debate', 'thenandnow']

我创建了这段代码：

# Order-preserving
list(dict.fromkeys(seq))
# Out: ['nowplaying', 'PBS', 'job', 'debate', 'thenandnow']

这是我的组件类。请检查我的员工方法：

[] Jim 
[x] Mondo
[] Ann

Answer 1

您正在将包含name和name的对象isSelected推送到您的formArray：

let obj = {
  name: name,
  isSelected: selected
}

let fg = this.formBuilder.group({
  name: [obj] // here!
});

this.empFormArray.push(fg);

你想要的只是将obj按原样推送到formArray，所以：

let fg = this.formBuilder.group({
  name: name,
  isSelected: selected
});

此外，您还要修改模板并将复选框中的formcontrol设置为isSelected而不是name，同时删除[value]。另请注意，我们需要在模板中使用controls来获取您的员工姓名。所以改变：

<input type="checkbox" [value]="emp.isSelected" formControlName="name">{{emp.name}}

到：

<input type="checkbox" formControlName="isSelected">{{emp.controls.name.value}}

这应该解决你的问题：）

StackBlitz

Answer 2

我建议使用https://vitalets.github.io/checklist-model/。这使得使用清单非常容易。

角度复选框列表不起作用

2 个答案:

StackBlitz