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

Question

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

我找到了一个很棒的 beta 0 plnkr（参见 http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview), but when I try to update it to beta 6 it breaks horribly (see http://plnkr.co/edit/voU933?p=preview）。

我查看了添加对单选选项的内置支持的提交（参见 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 和新表单模块中运行良好。例如，参见

中的 Plunker

原创

几个问题。

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

摆脱了它

无线电绑定值 {checked: true} 而不是 value。这显然是一个错误，可能与这些相同

我用一个丑陋的解决方法解决了它。参见 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

也许您可以使用 (change) 事件摆脱 (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 演示：https://plnkr.co/edit/NiN83eCzMD3V6oe88Obg?p=preview

Answer 3

我创建了一个版本，只对加载的元素使用单击事件并将选择的值传递给函数 "getSelection" 并更新模型。

在您的模板中：

<ul> <li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}} </li> </ul>

你的class：

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

参见示例：https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Answer 4

对于阅读本文的任何人，表格已经更改，最近发布的单选按钮也已更改 (RC 3)，现在不需要技巧 :)

This PR adds the ability for radio buttons to share a FormControl instance. This means you no longer need to create a RadioButtonState to manage radio buttons.

之前：

<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

Answer 5

  <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>

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

How to bind to radio buttons in angular2 beta 6

angular2-forms

angular