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によって提案されているよう[(ngModel)]に、[(ng-model)]「角度のある2.1+の代わりに」

注-ラジオボタンのバインドは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

プランカーライブデモ：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/>

ラジオボタンの使用例を公開しました 。Angular2：enumからラジオボタンを作成して双方向バインディングを追加する方法を教えてください。 少なくともAngular 2 RC5で動作します。

この問題は、バージョンAngular 2.0.0-rc.4でそれぞれフォームで解決されています。

"@angular/forms": "0.2.0"package.jsonに含めます。

次に、メインでブートストラップを拡張します。関連部分：

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

私はこれらのラジオボタンを処理する適切な方法を探していました。ここに私がここで見つけたソリューションの例があります。

<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に注意してください。

ラジオ入力はまだサポートされていないようです。（チェックボックスのに似てラジオ入力値アクセサがあるはず1それはattrの「チェックする」に設定、ここで私はいずれかを見つけることができませんでしたが）。だから私はそれを実装しました。こちらで確認できます。

[値] = "item" * ngForの使用は、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に移植する別のテクノロジーで書かれた既存のコードがたくさんあります。古いコードは、コードが各ラジオボタンを選択して選択されているかどうかを調べることに非常に関心があるパターンに従っています。ソリューションはクリックハンドラーソリューションのバリエーションであり、その一部はスタックオーバーフローで既に言及されています。このソリューションの付加価値は次のとおりです。

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>

上記は、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で動作するコードを以下に示します

（注：以前は、AnthonyBrenelièreの回答で提供された情報を使用することもありました。これはありがたいことです。しかし、少なくともAngular 7では、この部分は次のとおりです。

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

必要ないことがわかりました。）

ここでの私のソリューションには3つの利点があります。

1. 最も一般的に推奨されるソリューションと一致しています。したがって、新しいプロジェクトに適しています。
2. また、ラジオボタンコードをFlex / ActionScriptコードと同様にすることができます。FlexコードをAngularに変換しているので、これは個人的に重要です。Flex / ActionScriptコードと同様に、コードはラジオボタンオブジェクトを操作して、ラジオボタンがチェックされているかどうか、チェックされていないか、またはチェックされているかどうかを確認できます。
3. あなたが見るほとんどのソリューションとは異なり、それは非常にオブジェクトベースです。利点の1つは編成です。これは、ラジオボタンのデータバインディングフィールド（選択済み、有効、表示など）をグループ化します。

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");
    }
  };

2つのクラスが使用されます。

ラジオボタングループクラス：

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関数の。

しかし、検索した後、私はまだ試していませんが、これは[(ng-model)]githubへのリンクを使用してここで良い方法であるようです。これはRadioControlValueAccessorラジオとチェックボックスにも使用しています。これがこのメソッドの＃plnkr＃です 。