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를 확인합니다.

라디오 입력은 아직 지원되지 않는 것 같습니다. (체크 박스의 유사한 무선 입력 값 접근이 있어야 일 이 ATTR '확인'으로 설정, 여기 하지만 난 아무것도 발견하지 못했다는). 그래서 하나를 구현했습니다. 여기에서 확인할 수 있습니다 .

* ngFor를 사용하는 [value] = "item"은 Angular 2 및 4의 반응 형 양식에서도 작동합니다.

<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"> &nbsp; {{ item.name }}
    </div>
</form>

여기 저에게 맞는 솔루션이 있습니다. 여기에는 라디오 버튼 바인딩이 포함되지만 비즈니스 데이터에 바인딩되지 않고 대신 라디오 버튼의 상태에 바인딩됩니다. 아마도 새로운 프로젝트에 가장 적합한 솔루션은 아니지만 내 프로젝트에 적합합니다. 내 프로젝트에는 Angular로 포팅하는 다른 기술로 작성된 수많은 기존 코드가 있습니다. 이전 코드는 코드가 각 라디오 버튼을 검사하여 선택한 버튼인지 확인하는 데 매우 관심이있는 패턴을 따릅니다. 이 솔루션은 클릭 핸들러 솔루션의 변형이며, 그중 일부는 이미 Stack Overflow에서 언급되었습니다. 이 솔루션의 부가가치는 다음과 같습니다.

1. 작업해야하는 오래된 코드의 패턴으로 작업합니다.
2. 클릭 핸들러에서 "if"문 수를 줄이고 라디오 버튼 그룹을 처리하기 위해 도우미 클래스를 만들었습니다.

이 솔루션에는

1. 각 라디오 버튼에 다른 모델을 사용합니다.
2. 라디오 버튼의 모델로 "checked"속성을 설정합니다.
3. 클릭 한 라디오 버튼의 모델을 도우미 클래스에 전달합니다.
4. 도우미 클래스는 모델이 최신 상태인지 확인합니다.
5. "제출 시간"에 이것은 이전 코드가 라디오 버튼의 상태를 검사하여 모델을 검사하여 어떤 것이 선택되었는지 확인할 수 있도록합니다.

예:

<input type="radio"
    [checked]="maleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(maleRadioButtonModel)"

...

 <input type="radio"
    [checked]="femaleRadioButtonModel.selected"
    (click)="radioButtonGroupList.selectButton(femaleRadioButtonModel)"

...

사용자가 라디오 버튼을 클릭하면 도우미 클래스의 selectButton 메서드가 호출됩니다. 클릭 한 라디오 버튼의 모델을 전달합니다. 도우미 클래스는 전달 된 모델의 부울 "selected"필드를 true로 설정하고 다른 모든 라디오 버튼 모델의 "selected"필드를 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>

위의 내용은 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에서 작동하는 몇 가지 코드입니다.

(참고 : 과거에는 때때로 Anthony Brenelière의 답변에서 제공 한 정보를 사용했습니다. 감사합니다. 그러나 적어도 Angular 7의 경우이 부분은 다음과 같습니다.

 [checked]="model.options==2"

나는 불필요하다는 것을 알았다.)

여기 내 솔루션에는 세 가지 장점이 있습니다.

1. 가장 일반적으로 권장되는 솔루션과 일치합니다. 따라서 새로운 프로젝트에 좋습니다.
2. 또한 라디오 버튼 코드가 ​​Flex / ActionScript 코드와 유사하도록 허용합니다. Flex 코드를 Angular로 번역하고 있기 때문에 이것은 개인적으로 중요합니다. Flex / ActionScript 코드와 마찬가지로 라디오 버튼 개체에서 코드를 사용하여 라디오 버튼이 선택되었는지 확인 또는 선택 취소하거나 확인할 수 있습니다.
3. 여러분이 보게 될 대부분의 솔루션과는 달리 매우 객체 기반입니다. 한 가지 장점은 구성입니다. 선택됨, 활성화 됨, 표시됨 및 가능한 다른 것과 같은 라디오 단추의 데이터 바인딩 필드를 함께 그룹화합니다.

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

.ts 파일에서 미리 정의 된 변수의 값을 onChange함수의 getter 값으로 설정했습니다 .

그러나 검색 후 좋은 방법을 찾았지만 아직 시도하지 않았지만 [(ng-model)]링크를 사용하는 것이 좋습니다 . 여기 github에 있습니다 . 이것은 RadioControlValueAccessor라디오뿐만 아니라 확인란에도 사용됩니다. 여기이 방법에 대한 작업 # plnkr #이 있습니다 .