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

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

我为beta 0找到了一个很好的plnkr（请参阅），但当我尝试将其更新到beta 6时，它崩溃得很厉害（请参阅）

我看了一下commit，它添加了对无线电选项的内置支持（参见），给出了这个示例

@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");
}

@组件({
模板：`
`
})
食品级{
foodChicken=新的RadioButtonState（真，“鸡肉”）；
foodFish=新RadioButtonState（假，“鱼”）；
}

---

但是，到目前为止，我试图实现这一目标的努力与我失败的plnkr完全一样。

更新

无线电在RC.4和新的表单模块中运行良好。 例如，请参见中的Plunker

原创

有几个问题

使用

导致异常。我把‘min’去掉了

收音机绑定值

{checked:true}

，而不是

值

。这显然是一个bug，可能与这些bug相同

• （固定）
• （固定）

我找到了一个丑陋的解决办法。看

男性

女性

也许您可以使用

（更改）

事件两次删除

（ngModelChange）

和硬编码输入值：

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

男性

女性

---

更新的plnkr.co演示：

我创建了一个版本，只需在加载的元素上使用一个单击事件，将选择值传递到函数“getSelection”并更新模型

在模板中：

{{p}

你们班：

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

---

参见示例：

对于任何阅读本文的人来说，表单已经改变，最近版本（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');
}

{{f.value | json}/{foodChicken:{value:'chicken'，checked:false}，foodFish:{value:'fish'，checked:true}
类mycop{
foodChicken=新的RadioButtonState（假，“鸡肉”）；
foodFish=新RadioButtonState（真“鱼”）；
}

之后：

<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';
}

{{f.value | json}/{food:'fish'}
类mycop{
食物=鱼；
}

请参见

性感
男子气概
费米

哇，那些链接都是金色的！我确信没有人有这样的例子，但很显然，谷歌并没有为github问题编制索引。下次我会在那里搜索的。请。在你的答案中包括要点；请留下该链接以获取更多信息或作为参考。@techspider希望这样更好：）请添加上下文。检查此工作示例无线电列表

<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';
}

  <div class="col-lg-4">
            <div class="form-group">
              <legend class="col-form-legend">Sexo</legend>
              <label class="custom-control custom-radio">
                <input value="macho" [(ngModel)]="pet.sexo" name="pet.sexo1" id="radio1"  type="radio" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Macho</span>
              </label>
              <label class="custom-control custom-radio">
                <input  value="femea"  [(ngModel)]="pet.sexo" name="pet.sexo2" id="radio2"  type="radio" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span  class="custom-control-description">Fêmea</span>
              </label>
            </div>
          </div>