Angular2 - Pengikatan Tombol Radio

Saya ingin menggunakan tombol radio dalam bentuk menggunakan 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 nilai awal adalah 1

ketika halaman dimuat, tombol radio pertama tidak dicentang dan modifikasi tidak terikat pada model

Ada ide ?

gunakan [value] = "1" alih-alih 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/>

Edit:

Seperti yang disarankan oleh thllbrg "Untuk penggunaan angular 2.1+, [(ngModel)]bukan [(ng-model)]"

Catatan - pengikatan tombol radio sekarang menjadi fitur yang didukung di RC4 dan seterusnya - lihat jawaban ini

Contoh tombol radio menggunakan RadioControlValueAccessor khusus yang mirip dengan CheckboxControlValueAccessor ( Diperbarui dengan 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; }
}

Sumber: https://github.com/angular2-school/angular2-radio-button

Demo langsung Plunker: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

Solusi manual saya, yang melibatkan pembaruan secara manual model.optionsketika tombol radio baru dipilih:

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' };
}

Ini Plunkermenunjukkan hal di atas, serta cara menggunakan tombol untuk mengubah tombol radio yang dipilih - yaitu, untuk membuktikan bahwa pengikatan data adalah dua arah:

<button (click)="model.options = 'one'">set one</button>

Berikut adalah cara terbaik untuk menggunakan tombol radio di Angular2. Tidak perlu menggunakan event (click) atau RadioControlValueAccessor untuk mengubah nilai properti terikat, pengaturan properti [diperiksa] melakukan triknya.

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

Saya menerbitkan contoh penggunaan tombol radio: Sudut 2: bagaimana membuat tombol radio dari enum dan menambahkan penjilidan dua arah? Ia bekerja dari setidaknya Angular 2 RC5.

Masalah ini diselesaikan dalam versi Angular 2.0.0-rc.4, masing-masing dalam bentuk.

Sertakan "@angular/forms": "0.2.0" dalam package.json.

Kemudian perpanjang bootstrap Anda di main. Bagian yang relevan:

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

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

Saya memiliki ini dalam .html dan bekerja dengan sempurna: nilai: {{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>

Saya sedang mencari metode yang tepat untuk menangani tombol radio tersebut, berikut adalah contoh solusi yang saya temukan di sini:

<tr *ngFor="let entry of entries">
    <td>{{ entry.description }}</td>
    <td>
        <input type="radio" name="radiogroup" 
            [value]="entry.id" 
            (change)="onSelectionChange(entry)">
    </td>
</tr>

Perhatikan onSelectionChange yang meneruskan elemen saat ini ke metode.

Masukan radio sepertinya belum didukung. Harus ada nilai masukan radio accessor (mirip dengan kotak centang ini satu , di mana ia menetapkan 'diperiksa' attr di sini ) tapi aku tidak menemukan apapun. Jadi saya menerapkan satu; Anda bisa memeriksanya di sini .

[value] = "item" using * ngFor juga bekerja dengan Bentuk Reaktif di Angular 2 dan 4

<label *ngFor="let item of items">
    <input type="radio" formControlName="options" [value]="item">
    {{item}}
</label>`

Hal berikut memperbaiki masalah saya, harap pertimbangkan untuk menambahkan input radio di dalam formtag dan menggunakan [value]tag untuk menampilkan nilainya.

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

Inilah solusi yang berhasil untuk saya. Ini melibatkan pengikatan tombol radio - tetapi tidak mengikat ke data bisnis, melainkan, mengikat ke status tombol radio. Ini mungkin BUKAN solusi terbaik untuk proyek baru, tetapi sesuai untuk proyek saya. Proyek saya memiliki banyak sekali kode yang ada yang ditulis dalam teknologi berbeda yang saya porting ke Angular. Kode lama mengikuti pola di mana kode sangat tertarik untuk memeriksa setiap tombol radio untuk melihat apakah itu yang dipilih. Solusinya adalah variasi dari solusi handler klik, beberapa di antaranya telah disebutkan di Stack Overflow. Nilai tambah dari solusi ini mungkin:

1. Bekerja dengan pola kode lama yang harus saya kerjakan.
2. Saya membuat kelas helper untuk mencoba mengurangi jumlah pernyataan "jika" di handler klik, dan untuk menangani grup tombol radio mana pun.

Solusi ini melibatkan

1. Menggunakan model yang berbeda untuk setiap tombol radio.
2. Menyetel atribut "diperiksa" dengan model tombol radio.
3. Meneruskan model tombol radio yang diklik ke kelas helper.
4. Kelas helper memastikan modelnya mutakhir.
5. Pada "waktu pengiriman" ini memungkinkan kode lama untuk memeriksa status tombol radio untuk melihat mana yang dipilih dengan memeriksa model.

Contoh:

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

...

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

...

Saat pengguna mengklik tombol radio, metode selectButton dari kelas helper akan dipanggil. Ini melewati model untuk tombol radio yang diklik. Kelas helper menyetel bidang boolean "terpilih" dari model yang diteruskan ke true, dan menyetel bidang "terpilih" dari semua model tombol radio lainnya ke salah.

Selama inisialisasi, komponen harus membuat turunan kelas helper dengan daftar semua model tombol radio dalam grup. Dalam contoh, "radioButtonGroupList" akan menjadi turunan dari kelas helper yang kodenya adalah:

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

Contoh Daftar Radio Angular 8:

Tautan Sumber

Tanggapan 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,
                    }
                ]
            }
    ]

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

Solusi dan solusi paling sederhana:

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

Saya telah membuat versi dengan hanya menggunakan event klik pada elemen yang dimuat dan meneruskan nilai seleksi ke dalam fungsi "getSelection" dan memperbarui model.

Di template Anda:

<ul>
     <li *ngFor="let p of price"><input type="radio" name="price"      (click)="getValue(price.value)" value="{{p}}" #price> {{p}} 
     </li>
</ul>

Kelas Anda:

export class App {

  price:string;

  price = ["1000", "2000", "3000"];

  constructor() {   }

  model = new SomeData(this.price);

  getValue(price){
    this.model.price = price;
  }
}

Lihat contoh: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Jawaban ini mungkin bukan yang terbaik tergantung pada kasus penggunaan Anda, namun berhasil. Alih-alih menggunakan tombol Radio untuk pilihan Pria dan Wanita, menggunakan <select> </select>karya dengan sempurna, baik untuk menyimpan dan mengedit.

<select formControlName="gender" name="gender" class="">
  <option value="M">Male</option>
  <option value="F">Female</option>
</select>

Di atas seharusnya baik-baik saja, untuk mengedit menggunakan FormGroup dengan patchValue. Untuk menciptakan, Anda bisa menggunakan [(ngModel)]bukan formControlName. Masih berfungsi.

Pekerjaan pipa yang terlibat dengan tombol radio, saya memilih untuk memilih sebagai gantinya. Secara visual dan UX, tampaknya ini bukan yang terbaik, tetapi dari sudut pandang pengembang, ini jauh lebih mudah.

Pada perubahan tombol Radio dapatkan nilai dari masing-masing tombol dengan garis-garis ini

<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

Berikut adalah beberapa kode yang saya gunakan yang berfungsi dengan Angular 7

(Catatan: Dulu saya terkadang menggunakan info yang diberikan oleh jawaban Anthony Brenelière, yang sangat saya hargai. Tapi, setidaknya untuk Angular 7, bagian ini:

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

Saya merasa tidak perlu.)

Solusi saya di sini memiliki tiga keuntungan:

1. Konsisten dengan solusi yang paling sering direkomendasikan. Jadi bagus untuk proyek baru.
2. Juga memungkinkan kode tombol radio serupa dengan kode Flex / ActionScript. Ini secara pribadi penting karena saya menerjemahkan kode Flex ke Angular. Seperti kode Flex / ActionScript, ia memungkinkan kode bekerja pada objek tombol radio untuk memeriksa atau menghapus centang atau mencari tahu apakah tombol radio dicentang.
3. Tidak seperti kebanyakan solusi yang akan Anda lihat, ini sangat berbasis objek. Salah satu keuntungannya adalah organisasi: Ini mengelompokkan bidang pengikatan data dari tombol radio, seperti dipilih, diaktifkan, terlihat, dan mungkin lainnya.

Contoh 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">

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

Dua kelas digunakan:

Kelas Grup Tombol Radio:

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

};

Kelas Tombol Radio

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

}

Ini mungkin bukan solusi yang tepat tetapi yang ini juga merupakan pilihan yang berharap ini akan membantu seseorang.

Sampai sekarang saya sudah mendapatkan nilai radioButtons menggunakan metode (klik) seperti berikut:

<input type="radio" name="options" #male (click)="onChange(male.value)">Male
<input type="radio" name="options" #female (click)="onChange(female.value)">Female

dan dalam file .ts saya telah menetapkan nilai variabel standar untuk mendapatkan nilai onChangefungsi.

Tetapi setelah mencari saya menemukan metode yang bagus saya belum mencoba tetapi tampaknya yang ini bagus menggunakan [(ng-model)]tautan di sini untuk github di sini . ini digunakan RadioControlValueAccessoruntuk radio dan juga kotak centang. berikut adalah cara kerja # plnkr # untuk metode ini di sini .