Angular2 - 单选按钮绑定

Question

我想在使用Angular 2的表单中使用单选按钮

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

加载页面时,不会检查第一个单选按钮,并且修改不会绑定到模型

任何的想法 ？

Answer 1

使用[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所建议的那样"对于角度2.1+使用[(ngModel)]而不是[(ng-model)]"

Answer 2

注意 - 单选按钮绑定现在是RC4以后的支持功能 - 请参阅此答案

使用类似于CheckboxControlValueAccessor的自定义RadioControlValueAccessor的单选按钮示例(使用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

Answer 3

我的手动解决方法,包括model.options在选择新的单选按钮时手动更新:

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 (click)="model.options = 'one'">set one</button>

Answer 4

这是在Angular2中使用单选按钮的最佳方法.无需使用(click)事件或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/>

我发布了一个使用单选按钮的例子: Angular 2:如何从枚举创建单选按钮并添加双向绑定？ 它至少起作用于Angular 2 RC5.

Answer 5

此问题分别在表单中的Angular 2.0.0-rc.4版本中解决.

包含"@angular/forms": "0.2.0"在package.json中.

然后在main中扩展你的引导程序.相关部分:

...
import { AppComponent } from './app/app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms';

bootstrap(AppComponent, [
    disableDeprecatedForms(),
    provideForms(),
    appRouterProviders
]);

我在.html中有这个并且完美地工作:值:{{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>

Answer 6

我正在寻找合适的方法来处理这些单选按钮这里是我在这里找到的解决方案的一个例子:

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

Answer 7

无线电输入似乎还不支持。应该有一个无线电输入值访问器（类似于复选框的一个，它在此处设置“选中”属性），但我没有找到任何。所以我实现了一个；你可以在这里查看。