1

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

我对表单使用 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返回true（如果单击），false如果（至少单击一次后未选中）或（启动后）。""

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

4

2 回答 2

2

您有一个错字 (?) 而不是：

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

它需要是

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

以便它实际上指向您的表单控件。因为你现在拥有它，它指向一个不存在的名为wday.

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

于 2017-08-04T13:25:03.303 回答
0

如果所有输入都具有相同的 id，您可能还想查看 [name]="wday" 它们都将具有“let wday of wdays”的最后一次迭代的状态

我以前必须这样做

let wday of wdays; let i = index

[name]="'wday' + i"

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

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

{  Name: "monday", value: "true" }
于 2017-08-04T13:39:53.820 回答