Question

我在Angular中生成的单选按钮为：

     <div class="radio" *ngFor="let gender of genders">
          <input type="radio" name="gender" [checked]="gender=='male'" [value]="gender" > {{gender}}
     </div>

这正常工作，并且默认情况下选中“男性”广播。问题是，我必须添加ngModel指令才能将字段添加到表单对象中。但是，当我这样做时，默认的检查行为将不起作用，并且默认情况下不会检查任何无线电。

<input type="radio" name="gender" [checked]="gender=='male'" [value]="gender" ngModel> {{gender}}

有什么建议吗？

Answer 1

如角度documentation所述：

ngModel数据属性设置元素的value属性...

使用ngModel伪指令时，应设置其值以初始化输入元素。您可以通过数据绑定来实现。这是三种可能的语法：

<input type="radio" name="gender" [value]="gender" [ngModel]="genders[0]" >
<input type="radio" name="gender" [value]="gender" [ngModel]="'male'" >
<input type="radio" name="gender" [value]="gender" ngModel="male" >

This stackblitz显示了这些不同的情况。您还可以看到另一个示例，其中未设置ngModel值。在这种情况下，即使我们尝试设置其他按钮的checked属性，默认情况下也会检查具有空字符串值的单选按钮。

Angular 2选中的单选按钮ngModel

1 个答案: