Angular2 - Pengikatan Tombol Radio


120

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 ?


Jawaban:


108

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)]"


7
Apa tujuan dari atribut ng-control? Sepertinya semuanya bekerja tanpa itu.
Monsinyur

4
Di sudut 4+ Anda harus menggunakan [(ngModel)]bukan [(ng-model)]. Baca lagi .
Claudio Holanda

1
Ini hanya bekerja pada mode tambah baru. Tidak bekerja untuk mode edit. Saya tidak dapat menemukan apa alasannya. Dalam nilai baru yang ditetapkan untuk model yang berfungsi tetapi tidak berfungsi ketika saya mengambil nilai dari server dan ditampilkan di layar. Tetapi jika saya menampilkan nilai label yang ditampilkan tetapi tidak berfungsi, centang.
Vinoth Kumar

4
Dalam kasus saya, saya akhirnya menggunakan value="1" [(ngModel)]="model.options". Menutup valuetanda kurung siku tidak berfungsi
Sylvan D Ash

2
Aneh, tetapi dalam kasus saya juga, saya harus menggunakan value = "1" daripada [value] = "1". Saya menggunakan Angular 6
codingbbq

61

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


4
Dengan cara yang sama bahwa pertanyaan harus menyertakan kode yang relevan dalam pertanyaan , jawaban juga harus. Ini mungkin secara teoritis menjawab pertanyaan, tetapi akan lebih baik untuk memasukkan bagian penting dari jawaban di sini untuk pengguna di masa mendatang, dan menyediakan tautan untuk referensi. Jawaban yang didominasi tautan bisa menjadi tidak valid melalui pembusukan tautan .
Mogsdad

hebat .. itu aneh bahwa itu tidak termasuk dalam kerangka kerja
Mourad Zouabi

Solusi bagus! Satu tambahan kecil: Saya menggunakan input css [type = "radio"]: memeriksa penataannya, tetapi ini hanya berfungsi untuk saya saat menggunakan nativeElement dari _elementRef alih-alih hanya _elementRef: this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
bas

2
@GregWoods Memperbarui posting dengan perubahan baru dan terima kasih atas permintaan tarik,
Nidin Vinayakan

1
Sekarang secara native didukung, menggunakan rc4 sudut ke atas
Ckln

45

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>

saya punya dua pertanyaan. pertama: dalam get debug()fungsi apa getkepanjangannya? kedua adalah: apakah ada alternatif seperti ini untuk kotak centang? berikan juga beberapa kode untuk kotak centang. terima kasih +1 untuk jawaban yang bagus.
Pardeep Jain

2
@PardeepJain, getadalah fitur aksesor TypeScript . Posting pertanyaan untuk kotak centang.
Mark Rajcok

dapat mengirim parameter seperti ini '{{debug (abc)}}'?
Pardeep Jain

1
@PardeepJain, lihat plnkr.co/edit/iH3Te9EK7Y1dPXMzfWt6?p=preview . Anda tidak dapat memanggil penyetel seperti fungsi, jadi Anotherdate('2015-05-18T02:30:56')tidak akan berfungsi. Setter dipanggil saat Anda mencoba menetapkan nilai ke properti. Di plunker saya, saya membuat setDate()fungsi untuk \ hat menerima nilai tanggal baru, yang kemudian ditetapkan ke Anotherdate. Tugas itu secara otomatis akan memanggil penyetel.
Mark Rajcok

1
@PardeepJain, {{}}binding dievaluasi ulang setiap siklus deteksi perubahan. Saya menerapkan ngDoCheck()di AppComponent di plunker untuk menghitung siklus deteksi perubahan. Dari situ kita melihat bahwa deteksi perubahan dipanggil 3 kali. Dalam mode dev, binding diperiksa dua kali , karenanya menjadi 6 kali.
Mark Rajcok

36

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.


2
Ini hanya bekerja pada mode tambah baru. Tidak bekerja untuk mode edit. Saya tidak dapat menemukan apa alasannya. Dalam nilai baru yang ditetapkan untuk model yang berfungsi tetapi tidak berfungsi ketika saya mengambil nilai dari server dan ditampilkan di layar. Tetapi jika saya menampilkan nilai label yang ditampilkan tetapi tidak berfungsi, centang.
Vinoth Kumar

1
@VinothKumar Apakah Anda berhasil membuat mode edit berfungsi? Saya mengalami masalah yang sama
Dave Nottage

18

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>

ini adalah jawaban yang benar untuk rc4 dan hanya untuk menambahkan, radio dapat digunakan dengan enum.
Ron

8
menjalankan RC7, saya perlu menempatkan tanda kurung di sekitar [nilai]
Brian Vander Plaats

1
Saya pikir Anda perlu tanda kurung karena Anda menggunakan variabel dari komponen Anda, bukan string, dalam kasus saya jawaban @ Zolcsi bekerja dengan baik!
Naeem Baghi

1
Bagian ini dengan disableDeprecatedFormsdan provideFormsterlihat ajaib dan tidak masuk akal. Apa yang dilakukan benda-benda ini? Ini adalah kode tidak terbaca yang berlebihan yang membuat hal-hal yang tidak dapat diprediksi dari skala yang tidak diketahui.
Gherman

6

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.


4

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 .



@JimB: sayangnya semantik aslinya berbeda .
Kiara Grouwstra

4

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

1
Bagaimana cara melakukan pemilihan tunggal ??
Belter

4

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>

3

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

2

Contoh Daftar Radio Angular 8:

Tautan Sumber

masukkan deskripsi gambar di sini

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>

1

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
}

2
Bagaimana Anda dalam hal ini menyetel tombol radio ke nilai default dari awal?
EricC

Juga akan ada situasi di mana pengguna sering mengubah pilihan, setiap kali akan ada fungsi yang diterapkan untuk setiap cek,
blackHawk

1

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


1

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.


1

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


0

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

}

-1

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 .

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.