如何绑定到angular2 beta 6中的单选按钮

Question

如何在beta 6中实现单选按钮绑定？

我发现了beta 0的一个很好的plnkr(请参阅http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview),但是当我尝试将其更新为beta 6时,它会发生可怕的破坏(请参阅http://plnkr.co/编辑/ voU933？p =预览).

我看了一下添加内置支持无线电选项的提交(参见https://github.com/angular/angular/commit/e725542),它给出了这个例子

@Component({
  template: `
    <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
  `
})
class FoodCmp {
  foodChicken = new RadioButtonState(true, "chicken");
  foodFish = new RadioButtonState(false, "fish");
}

但到目前为止,我尝试做这项工作的结果与失败的plnkr相似.

Answer 1

更新

无线电在RC.4和新表格模块中正常工作.请参阅/sf/answers/2701364361/中的Plunker

原版的

几个问题.

使用<script src="https://code.angularjs.org/2.0.0-beta.7/angular2.min.js"></script>导致异常.我通过删除`min.来摆脱它.

收音机绑定值{checked: true}而不是value.这显然是一个错误,可能与这些相同

• 单选按钮数据绑定和表单验证无效
• 无法在同一控制组中选择多个单选按钮(固定)
• 输入类型=无法通过ng-model正确处理无线电(固定)
• https://github.com/angular/angular/issues/7642

我得到了一个丑陋的解决方法.请参阅https://plnkr.co/edit/988PSJKXCfrUXfLOGgyg?p=preview

    <input type="radio" [ngModel]="{checked: model.sex == 'male'}" (ngModelChange)="model.sex='male'"  name="sex" value="male">Male<br>
    <input type="radio" [ngModel]="{checked: model.sex == 'female'}"  (ngModelChange)="model.sex='female'" name="sex" value="female">Female

Answer 2

对于阅读此内容的任何人来说,表格已经改变,因此在最新版本(RC 3)中有单选按钮,现在不需要技巧:)

此PR添加了单选按钮共享FormControl实例的功能.这意味着您不再需要创建RadioButtonState来管理单选按钮.

之前:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="foodChicken">
    <input type="radio" name="food" [(ngModel)]="foodFish">
</form>

{{ f. value | json }}      // { foodChicken: {value: 'chicken', checked: false}, foodFish: {value: 'fish', checked: true} }
class MyComp {
   foodChicken = new RadioButtonState(false, 'chicken');
   foodFish = new RadioButtonState(true, 'fish');
}

后:

<form #f="ngForm">
   <input type="radio" name="food" [(ngModel)]="food" value="chicken">
   <input type="radio" name="food" [(ngModel)]="food" value="fish">
</form>

{{ f. value | json }}      // { food: 'fish' }
class MyComp {
   food = 'fish';
}

请参阅https://github.com/angular/angular/pull/9228