[forms] Angular2-라디오 버튼 바인딩
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입니다.
페이지가로드 될 때 첫 번째 라디오 버튼이 선택되지 않고 수정 사항이 모델에 바인딩되지 않습니다.
어떤 아이디어?
답변
사용 = “1”[값] 대신 값 = “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에서 제안한대로 “For angular 2.1+ use [(ngModel)]instead of [(ng-model)]“
답변
주 – 라디오 버튼 이제 바인딩 지원 기능 이후 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
답변
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>
답변
Angular2에서 라디오 버튼을 사용하는 가장 좋은 방법은 다음과 같습니다. 바인딩 된 속성 값을 변경하기 위해 (클릭) 이벤트 또는 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에서 작동합니다.
답변
이 문제는 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에 있고 완벽하게 작동합니다. 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>
답변
여기에서 라디오 버튼을 처리하는 올바른 방법을 찾고 있었는데 여기에서 찾은 솔루션의 예가 있습니다.
<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를 확인합니다.
