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.interval 초기값은 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/>
편집:
2의 경우 tllbrg 제 각 가 " 안 2.1+"를 합니다.[(ngModel)]에 [(ng-model)]"
참고 - 라디오 버튼 바인딩은 이제 RC4 이후 버전에서 지원되는 기능입니다. 이 답변을 참조하십시오.
CheckboxControlValueAccessor와 유사한 사용자 지정 RadioControlValueAccessor를 사용하는 라디오 버튼 예제(Angular 2 rc-1로 업데이트됨)
앱츠
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.vmdk
<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
플런커 라이브 데모: 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' };
}
여기에서는 위의 내용뿐만 아니라 버튼을 사용하여 선택한 라디오 버튼을 변경하는 방법, 즉 데이터 바인딩이 양방향임을 증명하는 방법을 설명합니다.
<button (click)="model.options = 'one'">set one</button>
Angular2에서 라디오 버튼을 사용하는 가장 좋은 방법은 다음과 같습니다.바인딩된 속성 값을 변경하기 위해 (클릭) 이벤트나 RadioControlValueAccessor를 사용할 필요가 없습니다. [체크] 속성을 설정하면 유용합니다.
<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"패키지로.json.
그런 다음 부트스트랩을 메인으로 확장합니다.관련 부분:
...
import { AppComponent } from './app/app.component';
import { disableDeprecatedForms, provideForms } from '@angular/forms';
bootstrap(AppComponent, [
disableDeprecatedForms(),
provideForms(),
appRouterProviders
]);
나는 이것을 .html에 가지고 있고 완벽하게 작동합니다: 값: {build}도구}}
<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>
현재 요소를 메서드로 전달하는 선택 변경에 주목합니다.
무선 입력이 아직 지원되지 않는 것 같습니다.라디오 입력 값 액세스기(체크박스의 액세스기와 유사하게 여기에 '체크' 특성이 설정됨)가 있어야 하지만 저는 하나도 찾지 못했습니다.그래서 저는 하나를 구현했습니다. 여기서 확인할 수 있습니다.
[value]*ngFor를 사용하는 ="item"은 Angular 2 및 4의 Reactive Forms에서도 작동합니다.
<label *ngFor="let item of items">
<input type="radio" formControlName="options" [value]="item">
{{item}}
</label>`
은 제했습니다. 에 하는 것을 . 라디오 입력을 내부에 추가하는 것을 고려해 주십시오.form를 합니다.[value]태그를 지정하여 값을 표시합니다.
<form name="form" (ngSubmit)="">
<div *ngFor="let item of options">
<input [(ngModel)]="model.option_id" type="radio" name="options" [value]="item.id"> {{ item.name }}
</div>
</form>
여기 저에게 맞는 해결책이 있습니다.여기에는 라디오 단추 바인딩이 포함되지만 비즈니스 데이터에는 바인딩되지 않고 라디오 단추의 상태에 바인딩됩니다.새로운 프로젝트에 가장 적합한 솔루션은 아닐 수도 있지만 제 프로젝트에 적합합니다.제 프로젝트에는 제가 Angular로 이식하는 다른 기술로 작성된 수많은 기존 코드가 있습니다.이전 코드는 코드가 각 라디오 버튼이 선택된 버튼인지 확인하는 데 매우 관심이 있는 패턴을 따릅니다.이 솔루션은 클릭 핸들러 솔루션의 변형이며, 그 중 일부는 스택 오버플로에서 이미 언급되었습니다.이 솔루션의 부가 가치는 다음과 같습니다.
- 제가 작업해야 하는 오래된 코드 패턴으로 작동합니다.
- 클릭 핸들러의 "if" 문 수를 줄이고 라디오 버튼 그룹을 처리하기 위해 도우미 클래스를 만들었습니다.
이 솔루션에는 다음이 포함됩니다.
- 각 라디오 버튼에 대해 다른 모델 사용.
- 라디오 버튼의 모델로 "체크됨" 특성 설정.
- 클릭한 라디오 단추의 모델을 도우미 클래스에 전달합니다.
- 도우미 클래스는 모델이 최신인지 확인합니다.
- 이를 통해 "제출 시간"에 기존 코드가 라디오 버튼의 상태를 검사하여 모델을 검사하여 어떤 버튼이 선택되었는지 확인할 수 있습니다.
예:
<input type="radio"
[checked]="maleRadioButtonModel.selected"
(click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"
...
<input type="radio"
[checked]="femaleRadioButtonModel.selected"
(click)="radioButtonGroupList.selectButton(femaleRadioButtonModel)"
...
사용자가 라디오 단추를 클릭하면 도우미 클래스의 selectButton 메서드가 호출됩니다.클릭된 라디오 버튼의 모델을 전달합니다.도우미 클래스는 전달된 모델의 부울 "선택됨" 필드를 true로 설정하고 다른 모든 라디오 버튼 모델의 "선택됨" 필드를 false로 설정합니다.
초기화 중에 구성 요소는 그룹의 모든 라디오 버튼 모델 목록을 사용하여 도우미 클래스의 인스턴스를 구성해야 합니다.이 예에서 "radioButtonGroupList"는 코드가 다음과 같은 도우미 클래스의 인스턴스입니다.
import {UIButtonControlModel} from "./ui-button-control.model";
export class UIRadioButtonGroupListModel {
private readonly buttonList : UIButtonControlModel[];
private readonly debugName : string;
constructor(buttonList : UIButtonControlModel[], debugName : string) {
this.buttonList = buttonList;
this.debugName = debugName;
if (this.buttonList == null) {
throw new Error("null buttonList");
}
if (this.buttonList.length < 2) {
throw new Error("buttonList has less than 2 elements")
}
}
public selectButton(buttonToSelect : UIButtonControlModel) : void {
let foundButton : boolean = false;
for(let i = 0; i < this.buttonList.length; i++) {
let oneButton : UIButtonControlModel = this.buttonList[i];
if (oneButton === buttonToSelect) {
oneButton.selected = true;
foundButton = true;
} else {
oneButton.selected = false;
}
}
if (! foundButton) {
throw new Error("button not found in buttonList");
}
}
}
Angular 8 라디오 목록 예:
소스 링크
JSON 응답
[
{
"moduleId": 1,
"moduleName": "Employee",
"subModules":[
{
"subModuleId": 1,
"subModuleName": "Add Employee",
"selectedRightType": 1,
},{
"subModuleId": 2,
"subModuleName": "Update Employee",
"selectedRightType": 2,
},{
"subModuleId": 3,
"subModuleName": "Delete Employee",
"selectedRightType": 3,
}
]
},
{
"moduleId": 2,
"moduleName": "Company",
"subModules":[
{
"subModuleId": 4,
"subModuleName": "Add Company",
"selectedRightType": 1,
},{
"subModuleId": 5,
"subModuleName": "Update Company",
"selectedRightType": 2,
},{
"subModuleId": 6,
"subModuleName": "Delete Company",
"selectedRightType": 3,
}
]
},
{
"moduleId": 3,
"moduleName": "Tasks",
"subModules":[
{
"subModuleId": 7,
"subModuleName": "Add Task",
"selectedRightType": 1,
},{
"subModuleId": 8,
"subModuleName": "Update Task",
"selectedRightType": 2,
},{
"subModuleId": 9,
"subModuleName": "Delete Task",
"selectedRightType": 3,
}
]
}
]
HTML 템플릿
<div *ngFor="let module of modules_object">
<div>{{module.moduleName}}</div>
<table width="100%">
<thead>
<tr>
<th>Submodule</th>
<th>
<input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="1"> Read Only
</th>
<th>
<input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="2"> Read Write
</th>
<th>
<input type="radio" name="{{module.moduleName}}_head_radio" [(ngModel)]="module.selHeader" (change)="selAllColumn(module)" [value]="3"> No Access
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let sm of module.subModules">
<td>{{sm.subModuleName}}</td>
<td>
<input type="radio" [checked]="sm.selectedRightType == '1'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="1">
</td>
<td class="cl-left">
<input type="radio" [checked]="sm.selectedRightType == '2'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="2">
</td>
<td class="cl-left">
<input type="radio" [checked]="sm.selectedRightType == '3'" [(ngModel)]="sm.selectedRightType" name="{{sm.subModuleId}}_radio" [value]="3">
</td>
</tr>
</tbody>
</table>
</div>
가장 간단한 솔루션 및 해결 방법:
<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
}
로드된 요소에서 클릭 이벤트만 사용하고 선택 값을 "getSelection" 함수에 전달하여 모델을 업데이트하여 버전을 만들었습니다.
템플릿에서:
<ul>
<li *ngFor="let p of price"><input type="radio" name="price" (click)="getValue(price.value)" value="{{p}}" #price> {{p}}
</li>
</ul>
클래스:
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
사용 사례에 따라 이 답변이 최선이 아닐 수도 있지만 효과가 있습니다.남성 및 여성 선택에 라디오 버튼을 사용하는 대신<select> </select>저장 및 편집 모두에서 완벽하게 작동합니다.
<select formControlName="gender" name="gender" class="">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
FormGroup을 사용하여 편집할 경우 위와 같이 하면 됩니다.patchValue생성을 위해 다음을 사용할 수 있습니다.[(ngModel)]대신에formControlName여전히 작동합니다.
라디오 버튼 1번과 관련된 배관 작업, 대신 선택 항목으로 가기로 결정했습니다.시각적으로 그리고 UX적으로, 그것이 최고는 아닌 것처럼 보이지만, 개발자의 관점에서 보면, 그것은 매우 쉽습니다.
라디오 버튼 변경 시 이 라인이 있는 각 버튼의 값을 가져옵니다.
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="dog" name="cat" checked (change)="onItemChange($event)" value="Dog" />Dog</label>
<label class="radio-inline">
<input class="form-check-input" type="radio" [(ngModel)]="cat" name="cat" (change)="onItemChange($event)" value="Cat" />Cat</label>
https://stackblitz.com/edit/angular-jpo2dm?embed=1&file=src/app/app.component.html
다음은 Angular 7에서 작동하는 코드입니다.
(참고: 과거에 저는 가끔 앤서니 브렌리에르의 답변에 의해 제공된 정보를 사용했습니다. 저는 감사합니다.그러나 적어도 Angular 7의 경우, 이 부분은 다음과 같습니다.
[checked]="model.options==2"
저는 불필요하다는 것을 알았습니다.)
이 솔루션에는 세 가지 이점이 있습니다.
- 가장 일반적으로 권장되는 솔루션과 일치합니다.그래서 새로운 프로젝트에 좋습니다.
- 또한 라디오 버튼 코드가 Flex/ActionScript 코드와 유사할 수 있습니다.플렉스 코드를 Angular로 변환하고 있기 때문에 개인적으로 중요합니다.Flex/ActionScript 코드처럼 코드가 라디오 버튼 객체에서 작동하여 라디오 버튼이 선택되어 있는지 확인하거나 선택 해제하거나 확인할 수 있습니다.
- 여러분이 보게 될 대부분의 솔루션과 달리, 그것은 매우 객체 기반입니다.한 가지 장점은 다음과 같습니다.라디오 단추의 데이터 바인딩 필드(예: 선택됨, 사용 가능, 표시됨 및 기타)를 함께 그룹화합니다.
예: HTML:
<input type="radio" id="byAllRadioButton"
name="findByRadioButtonGroup"
[(ngModel)]="findByRadioButtonGroup.dataBindingValue"
[value]="byAllRadioButton.MY_DATA_BINDING_VALUE">
<input type="radio" id="byNameRadioButton"
name="findByRadioButtonGroup"
[(ngModel)]="findByRadioButtonGroup.dataBindingValue"
[value]="byNameRadioButton.MY_DATA_BINDING_VALUE">
TypeScript 예제:
findByRadioButtonGroup : UIRadioButtonGroupModel
= new UIRadioButtonGroupModel("findByRadioButtonGroup",
"byAllRadioButton_value",
(groupValue : any) => this.handleCriteriaRadioButtonChange(groupValue)
);
byAllRadioButton : UIRadioButtonControlModel
= new UIRadioButtonControlModel("byAllRadioButton",
"byAllRadioButton_value",
this.findByRadioButtonGroup) ;
byNameRadioButton : UIRadioButtonControlModel
= new UIRadioButtonControlModel("byNameRadioButton",
"byNameRadioButton_value",
this.findByRadioButtonGroup) ;
private handleCriteriaRadioButtonChange = (groupValue : any) : void => {
if ( this.byAllRadioButton.selected ) {
// Do something
} else if ( this.byNameRadioButton.selected ) {
// Do something
} else {
throw new Error("No expected radio button selected");
}
};
두 가지 클래스가 사용됩니다.
라디오 버튼 그룹 클래스:
export class UIRadioButtonGroupModel {
private _dataBindingValue : any;
constructor(private readonly debugName : string,
private readonly initialDataBindingValue : any = null, // Can be null or unspecified
private readonly notifyOfChangeHandler : Function = null // Can be null or unspecified
) {
this._dataBindingValue = initialDataBindingValue;
}
public get dataBindingValue() : any {
return this._dataBindingValue;
}
public set dataBindingValue(val : any) {
this._dataBindingValue = val;
if (this.notifyOfChangeHandler != null) {
MyAngularUtils.callLater(this.notifyOfChangeHandler, this._dataBindingValue);
}
}
public unselectRadioButton(valueOfOneRadioButton : any) {
//
// Warning: This method probably never or almost never should be needed.
// Setting the selected radio button to unselected probably should be avoided, since
// the result will be that no radio button will be selected. That is
// typically not how radio buttons work. But we allow it here.
// Be careful in its use.
//
if (valueOfOneRadioButton == this._dataBindingValue) {
console.warn("Setting radio button group value to null");
this.dataBindingValue = null;
}
}
};
라디오 단추 클래스
export class UIRadioButtonControlModel {
public enabled : boolean = true;
public visible : boolean = true;
constructor(public readonly debugName : string,
public readonly MY_DATA_BINDING_VALUE : any,
private readonly group : UIRadioButtonGroupModel,
) {
}
public get selected() : boolean {
return (this.group.dataBindingValue == this.MY_DATA_BINDING_VALUE);
}
public set selected(doSelectMe : boolean) {
if (doSelectMe) {
this.group.dataBindingValue = this.MY_DATA_BINDING_VALUE;
} else {
this.group.unselectRadioButton(this.MY_DATA_BINDING_VALUE);
}
}
}
이것은 올바른 해결책이 아닐 수도 있지만 누군가에게 도움이 되기를 바라는 옵션이기도 합니다.
지금까지 저는 다음과 같은 (클릭) 방법을 사용하여 radioButtons의 값을 얻었습니다.
<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">Female
을 그고리파일에서나는미다리얻정니의 했습니다.onChange기능.
좋은 , 이 것 같습니다.[(ng-model)]여기에 github 링크가 있습니다.이것은 사용하는 것입니다.RadioControlValueAccessor확인란뿐만 아니라 라디오도 마찬가지입니다.여기에 이 방법에 대한 작업 #plnkr#이 있습니다.
언급URL : https://stackoverflow.com/questions/31879497/angular2-radio-button-binding
'programing' 카테고리의 다른 글
| Linkq에서 문자열을 엔티티로 변환하는 데 문제가 있습니다. (0) | 2023.04.26 |
|---|---|
| Excel을 데이터 테이블로 신속하게 가져오기 (0) | 2023.04.26 |
| 디렉토리의 모든 SQL 파일 실행 (0) | 2023.04.26 |
| iOS 앱에서 Safari를 시작하고 URL을 여는 방법 (0) | 2023.04.26 |
| ARC를 사용하도록 프로젝트를 변환할 때 "스위치 케이스가 보호 범위 내에 있다"는 것은 무엇을 의미합니까? (0) | 2023.04.26 |