Angular2 – 单选button绑定
我想在使用Angular 2的表单中使用单选button
Options : <br/> 1 : <input name="options" ng-control="options" type="radio" value="1" [(ng-model)]="model.options" ><br/> 2 : <input name="options" ng-control="options" type="radio" value="2" [(ng-model)]="model.options" ><br/> model.options的初始值是1
当页面被加载时，第一个单选button不被检查，修改不被绑定到模型
任何想法 ？
使用[value] =“1”而不是value =“1”
<input name="options" ng-control="options" type="radio" [value]="1" [(ngModel)]="model.options" ><br/> <input name="options" ng-control="options" type="radio" [value]="2" [(ngModel)]="model.options" ><br/>
编辑：
正如thllbrg所build议的：“For angular 2.1+ use [(ngModel)]而不是[(ng-model)] ”
注 – 单选button绑定现在是RC4开始支持的function – 请参阅此答案
使用与CheckboxControlValueAccessor类似的自定义RadioControlValueAccessor的单选button示例（ 使用Angular 2 rc-1更新 ）
App.ts
import {Component} from "@angular/core"; import {FORM_DIRECTIVES} from "@angular/common"; import {RadioControlValueAccessor} from "./radio_value_accessor"; import {bootstrap} from '@angular/platform-browser-dynamic'; @Component({ selector: "my-app", templateUrl: "template.html", directives: [FORM_DIRECTIVES, RadioControlValueAccessor] }) export class App { model; constructor() { this.model = { sex: "female" }; } }
template.html
<div> <form action=""> <input type="radio" [(ngModel)]="model.sex" name="sex" value="male">Male<br> <input type="radio" [(ngModel)]="model.sex" name="sex" value="female">Female </form> <input type="button" value="select male" (click)="model.sex='male'"> <input type="button" value="select female" (click)="model.sex='female'"> <div>Selected Radio: {{model.sex}}</div> </div>
radio_value_accessor.ts
import {Directive, Renderer, ElementRef, forwardRef} from '@angular/core'; import {NG_VALUE_ACCESSOR, ControlValueAccessor} from '@angular/common'; export const RADIO_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioControlValueAccessor), multi: true }; @Directive({ selector: 'input[type=radio][ngControl],input[type=radio][ngFormControl],input[type=radio][ngModel]', host: {'(change)': 'onChange($event.target.value)', '(blur)': 'onTouched()'}, bindings: [RADIO_VALUE_ACCESSOR] }) export class RadioControlValueAccessor implements ControlValueAccessor { onChange = (_) => {}; onTouched = () => {}; constructor(private _renderer: Renderer, private _elementRef: ElementRef) {} writeValue(value: any): void { this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value); } registerOnChange(fn: (_: any) => {}): void { this.onChange = fn; } registerOnTouched(fn: () => {}): void { this.onTouched = fn; } }
来源： https ： //github.com/angular2-school/angular2-radio-button
Plunker现场演示： http ://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview
我的手动解决方法，这涉及到手动更新model.optionsselect一个新的单选button时：
template: ` <label *ngFor="let item of radioItems"> <input type="radio" name="options" (click)="model.options = item" [checked]="item === model.options"> {{item}} </label>` class App { radioItems = 'one two three'.split(' '); model = { options: 'two' }; }
这个Plunker演示了上面的内容，以及如何使用一个button来改变所选的单选button – 即certificate数据绑定是双向的：
<button (click)="model.options = 'one'">set one</button>
这里是在Angular2中使用单选button的最佳方式。 没有必要使用（单击）事件或RadioControlValueAccessor来更改绑定的属性值，设置[checked]属性是诀窍。
<input name="options" type="radio" [(ngModel)]="model.options" [value]="1" [checked]="model.options==1" /><br/> <input name="options" type="radio" [(ngModel)]="model.options" [value]="2" [checked]="model.options==2" /><br/>
我发表了一个使用单选button的例子： Angular 2：如何从枚举创build单选button并添加双向绑定？ 它从至lessAngular 2 RC5的作品。
这个问题在Angular 2.0.0-rc.4版本中分别在表单中解决。
在package.json中包含"@angular/forms": "0.2.0" 。
然后扩展你的引导主。 相关部分：
... import { AppComponent } from './app/app.component'; import { disableDeprecatedForms, provideForms } from '@angular/forms'; bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), appRouterProviders ]);
我有.html这个完美的作品：value：{{buildTool}}
<form action=""> <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="gradle">Gradle <br> <input type="radio" [(ngModel)]="buildTool" name="buildTool" value="maven">Maven </form>
无线电input似乎还不支持。 应该有一个无线电input值访问器（类似于checkbox的一个 ，它在这里设置“检查”属性），但我没有find任何。 所以我执行了一个; 你可以在这里查看
我正在寻找正确的方法来处理这些单选button，这里是我在这里find的一个解决scheme的例子：
<tr *ngFor="let entry of entries"> <td>{{ entry.description }}</td> <td> <input type="radio" name="radiogroup" [value]="entry.id" (change)="onSelectionChange(entry)"> </td> </tr>
注意将当前元素传递给方法的onSelectionChange 。
[value] =“item”使用* ngFor也适用于Angular 2和4中的Reactive Forms
<label *ngFor="let item of items"> <input type="radio" formControlName="options" [value]="item"> {{item}} </label>`
这可能不是正确的解决scheme，但这个也是select希望它会帮助别人。
到目前为止，我已经使用（点击）方法获得radioButtons的值，如下所示：
<input type="radio" name="options" #male (click)="onChange(male.value)">Male <input type="radio" name="options" #female (click)="onChange(female.value)">Female
在.ts文件中，我已经将预定义variables的值设置为onChange函数的getter值。
但search后，我发现很好的方法，我还没有尝试过，但似乎这是一个很好的[(ng-model)]链接在这里github 在这里 。 这是使用RadioControlValueAccessor无线电以及checkbox。 这里是工作＃plnkr＃ 这里的这个方法。
最简单的解决scheme和解决方法：
<input name="toRent" type="radio" (click)="setToRentControl(false)"> <input name="toRent" type="radio" (click)="setToRentControl(true)"> setToRentControl(value){ this.vm.toRent.updateValue(value); alert(value); //true/false }
我已经创build了一个版本，只需在加载的元素上使用单击事件，并将select的值传递给函数“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
