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会返回true（如果点击），false if（在点击至少一次后取消选中）或在控制台中""（启动后）。

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

Answer 1

你有一个拼写错误（？）而不是：

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

它需要

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

这样它实际上会指向您的表单控件。因为现在，它指向一个名为wday的非现有表单控件。

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

Answer 2

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

我必须在

之前这样做

let wday of wdays; let i = index

[name]="'wday' + i"

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

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

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

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

2 个答案: