Question

我有一个帐户更新表单。在该表单中，我可以设置帐户是启用还是禁用。当加载更新表单时，我希望根据从该数据库中为该特定帐户检索的数据库值（enabled = true或false）来检查radiobutton组。我试图通过以下代码完成它：

<label>Status</label>
<div class = "control-group">
<div class="controls radio-group" id="status" name = "status">
<label class="radio-inline">
  <input type="radio" [checked] = "account.enabled === true" name="optradio1" formControlName="status" [value] = "true">Actief
</label>
<label class="radio-inline">
  <input type="radio" [checked] = "account.enabled === false" name="optradio1" formControlName="status" [value] = "false">Inactief
</label>
</div>
</div>

但它会自动检查与上次保存的radiobutton值对应的单选按钮。

有谁知道我怎么能做到这一点？

Answer 1

你需要的是event listener看看this堆栈溢出问题，该问题使用循环将监听器连接到多个单选按钮。

侦听器将侦听按钮的值更改，并在发生时运行函数。

在该功能中，将单选按钮的新值设置为您想要的任何值。

Answer 2

不要使用event listener，它会破坏规则，优雅而且非常粗鲁。

此外，当你spy（听）每一个事件时，表现都会很糟糕。

幸运的是，angular支持原生事件触发器来完成单选按钮以处理ngModel

HTML 的

<label class="radio-inline">
  <input type="radio" [checked] = "account.enabled" name="optradio1" formControlName="status" [value] = "true" (change)="account.enabled=!account.enabled" />Actief
</label>
<label class="radio-inline">
  <input type="radio" [checked] = "!account.enabled" name="optradio1" formControlName="status" [value] = "false" (change)="account.enabled=!account.enabled" />Inactief
</label>

尽管使用了(change)，但还有更简单的方法来处理它，自己创建一个组件或构建一个Directive（如果你想使用CDK，真的很难）。

如何将两个radiobuttons绑定到数据模型？

2 个答案: