当表单中的值设置为 true 时显示选中的复选框按钮

Question

我有一个表单，其中包含一组样式为按钮的复选框，因此在单击它们时不会保持选中状态。

我使用 Angular 模板驱动方法来处理表单，并使用 *ngFor 循环来设置可以选中的工作日数（如果不清楚，可以同时选中多个复选框).

我的代码如下所示：

<div class="btn-group btn-group-justified" data-toggle="buttons" role="group">
  <label class="btn btn-primary" *ngFor="let wday of wdays" [class.active]="f.value.wday">
    <input type="checkbox" [name]="wday" [id]="wday" ngModel [value]="wday">{{ wday }}
  </label>
</div>

表单是这样启动的：<form (ngSubmit)="onSubmit(f)" #f="ngForm"> 因此 f.wday returns true（如果点击），false 如果（点击后未选中）至少被点击一次）或 ""（启动后）在控制台中。

我有点困惑为什么按钮没有在视觉上显示为活动的。

Answer 1

您打错了 (?) 而不是：

[class.active]="f.value.wday"

需要

[class.active]="f.value[wday]"

这样它就会实际指向您的表单控件。由于您现在拥有它，它指向一个名为 wday.

的不存在的表单控件

演示：http://plnkr.co/edit/SSeqPHFyCQ1JUTLtGouv?p=preview

Answer 2

您可能还想看看 [name]="wday" 如果所有输入都具有相同的 id，它们都将具有 "let wday of wdays"

的最后一次迭代的状态

我以前不得不这样做

let wday of wdays; let i = index

[name]="'wday' + i"

您可能也不希望所有输入的 Id 都相同。

还有wday是什么格式，是真假还是对象？我猜是这样的，并会解释其他问题

{  Name: "monday", value: "true" }

当表单中的值设置为 true 时显示选中的复选框按钮

Showing a checkbox button as selected when value in form is set to true

angular

class

button

angular-forms