Angular2 - Wiązanie przycisku radiowego

121

Chcę użyć przycisku opcji w formularzu używającym 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/>

wartość początkowa model.options to 1

kiedy strona jest ładowana, pierwszy przycisk opcji nie jest zaznaczony, a modyfikacje nie są powiązane z modelem

Dowolny pomysł ?

Mourad Zouabi
źródło
1
Przykład dynamicznej listy radia tutaj freakyjolly.com/how-to-show-radio-input-listing-in-angular-6
Code Spy

Odpowiedzi:

109

użyj [value] = „1” zamiast 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/>

Edytować:

Zgodnie z sugestią thllbrg „W przypadku kątowego 2.1+ użyj [(ngModel)]zamiast [(ng-model)]

Atal Kishore
źródło
7
Jaki jest cel atrybutu ng-control? Wygląda na to, że wszystko działa bez niego.
Monsignor
4
W Angular 4+ musisz użyć [(ngModel)]zamiast [(ng-model)]. Przeczytaj jeszcze raz .
Claudio Holanda
1
Działa to tylko na dodawanie nowego trybu. Nie działa w trybie edycji. Nie mogłem znaleźć powodu. W świeżej otwartej wartości przypisanej dla modelu działającego, ale nie działającego, gdy pobieram wartości z serwera i wyświetlam je na ekranie, ale jeśli wyświetlam na etykiecie wartość pokazująca, ale nie działająca, zaznaczona.
Vinoth Kumar
4
W moim przypadku ostatecznie użyłem value="1" [(ngModel)]="model.options". Ujęcie valuew nawiasach kwadratowych nie działało
Sylvan D Ash
2
Dziwne, ale w moim przypadku też musiałem użyć value = "1" zamiast [value] = "1". Używam Angular 6
codingbbq
61

Uwaga - powiązanie przycisku radiowego jest teraz obsługiwaną funkcją w RC4 i nowszych - zobacz tę odpowiedź

Przykład przycisku radiowego używającego niestandardowego RadioControlValueAccessor podobnego do CheckboxControlValueAccessor ( zaktualizowany za pomocą 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; }
}

Źródło: https://github.com/angular2-school/angular2-radio-button

Demo na żywo Plunker: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

Nidin Vinayakan
źródło
4
W ten sam sposób, w jaki pytania powinny zawierać odpowiedni kod w pytaniu , tak samo powinny być odpowiedzi . To może teoretycznie odpowiedzieć na pytanie, ale najlepiej byłoby zawrzeć tutaj zasadnicze części odpowiedzi dla przyszłych użytkowników i podać link do odniesienia. Odpowiedzi zdominowane przez linki mogą stać się nieważne przez rotację linków .
Mogsdad,
super… to dziwne, że nie ma go w
ramce
Świetne rozwiązanie! Jeden mały dodatek: używam wejścia css [type = "radio"]: sprawdzone pod kątem stylizacji, ale działa to tylko dla mnie, gdy używam nativeElement z _elementRef zamiast tylko _elementRef: this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value == this._elementRef.nativeElement.value);
bas
2
@GregWoods Zaktualizowałem post o nowe zmiany i dzięki za prośbę o wycofanie,
Nidin Vinayakan
1
Jest teraz obsługiwany natywnie, używając kątowego rc4 i nowszych
Ckln
45

Moje ręczne obejście, które polega na ręcznej aktualizacji model.optionspo wybraniu nowego przycisku opcji:

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

To Plunkerdemonstruje powyższe, a także sposób użycia przycisku do zmiany wybranego przycisku opcji - tj. W celu udowodnienia, że ​​powiązanie danych jest dwukierunkowe:

<button (click)="model.options = 'one'">set one</button>
Mark Rajcok
źródło
mam dwa pytania. po pierwsze: w get debug()funkcji, co getoznacza? po drugie: czy jest jakaś alternatywa podobna do tej odpowiedzi dla pól wyboru? proszę podać również kod dla pól wyboru. dzięki +1 za świetną odpowiedź.
Pardeep Jain
2
@PardeepJain, getjest funkcją dostępu TypeScript . Zadaj pytanie dla pól wyboru.
Mark Rajcok
czy można wysłać parametry w taki sposób '{{debug (abc)}}'?
Pardeep Jain
1
@PardeepJain, patrz plnkr.co/edit/iH3Te9EK7Y1dPXMzfWt6?p=preview . Nie możesz wywołać setera jak funkcji, więc Anotherdate('2015-05-18T02:30:56')nie zadziała. Settery są wywoływane, gdy próbujesz przypisać wartość do właściwości. W moim plunkerze utworzyłem setDate()funkcję, aby \ hat przyjmował nową wartość daty, którą następnie przypisuje Anotherdate. To przypisanie automatycznie wywoła ustawiającego.
Mark Rajcok
1
@PardeepJain, {{}}powiązania są ponownie oceniane w każdym cyklu wykrywania zmian. Zaimplementowałem ngDoCheck()w AppComponent w plunkrze, aby zliczać cykle wykrywania zmian. Z tego widać, że wykrywanie zmian jest wywoływane 3 razy. W trybie deweloperskim powiązania są sprawdzane dwukrotnie , stąd 6 razy.
Mark Rajcok
36

Oto najlepszy sposób korzystania z przycisków opcji w Angular2. Nie ma potrzeby używania zdarzenia (click) lub RadioControlValueAccessor do zmiany powiązanej wartości właściwości, ustawienie właściwości [check] załatwia sprawę.

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

Opublikowałem przykład użycia przycisków radiowych: Angular 2: jak utworzyć przyciski radiowe z wyliczenia i dodać dwukierunkowe wiązanie? Działa od co najmniej Angular 2 RC5.

Anthony Brenelière
źródło
2
Działa to tylko na dodawanie nowego trybu. Nie działa w trybie edycji. Nie mogłem znaleźć powodu. W świeżej otwartej wartości przypisanej dla modelu działającego, ale nie działającego, gdy pobieram wartości z serwera i wyświetlam je na ekranie, ale jeśli wyświetlam na etykiecie wartość pokazująca, ale nie działająca, zaznaczona.
Vinoth Kumar
1
@VinothKumar Czy udało ci się uruchomić tryb edycji? Mam ten sam problem
Dave Nottage
18

Ten problem został rozwiązany w wersji Angular 2.0.0-rc.4, odpowiednio w formularzach.

Uwzględnij "@angular/forms": "0.2.0"w pliku package.json.

Następnie rozszerz bootstrap w main. Odpowiednia część:

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

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

Mam to w .html i działa idealnie: wartość: {{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>
Zolcsi
źródło
to jest poprawna odpowiedź od rc4 i wystarczy dodać, że radia mogą być używane z wyliczeniami.
Ron
8
biegając RC7, musiałem umieścić nawiasy wokół [wartość]
Brian Vander Plaats
1
Myślę, że potrzebujesz nawiasów, ponieważ używasz zmiennej swojego komponentu zamiast ciągu, w moim przypadku odpowiedź @ Zolcsi działała dobrze!
Naeem Baghi
1
Ta część z disableDeprecatedFormsi provideFormswygląda magiczne i nie ma sensu. Co to robi? Jest to nadmiarowy, nieczytelny kod, który tworzy nieprzewidywalne rzeczy o nieznanej skali.
Gherman
6

Szukałem odpowiedniej metody obsługi tych przycisków radiowych, tutaj jest przykład rozwiązania, które znalazłem tutaj:

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

Zwróć uwagę na onSelectionChange, który przekazuje bieżący element do metody.

Pini Cheyni
źródło
4

Wydaje się, że wejście radiowe nie jest jeszcze obsługiwane. Nie powinno być wprowadzona wartość radiowy accessor (podobna do CheckBox w jednym , gdzie ustawia „sprawdzone” attr tutaj ), ale nie znaleźliśmy żadnych. Więc wdrożyłem jeden; możesz to sprawdzić tutaj .

barbatus
źródło
@JimB: niestety wydaje się, że semantyka języka natywnego jest inna .
Kiara Grouwstra
4

[value] = "item" przy użyciu * ngFor działa również z Reactive Forms w Angular 2 i 4

<label *ngFor="let item of items">
    <input type="radio" formControlName="options" [value]="item">
    {{item}}
</label>`
Colleen Purcell
źródło
1
Jak wybrać pojedynczy wybór?
Belter
4

Poniższe rozwiązania rozwiązały mój problem, rozważ dodanie wejścia radiowego do formtagu i użycie [value]tagu do wyświetlenia wartości.

<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>
rc.adhikari
źródło
3

Oto rozwiązanie, które działa dla mnie. Obejmuje powiązanie przycisku opcji - ale nie powiązanie z danymi biznesowymi, ale zamiast tego powiązanie ze stanem przycisku opcji. Prawdopodobnie NIE jest to najlepsze rozwiązanie dla nowych projektów, ale jest odpowiednie dla mojego projektu. Mój projekt zawiera mnóstwo istniejącego kodu napisanego w innej technologii, którą przenoszę do Angulara. Stary kod podąża za wzorcem, w którym kod jest bardzo zainteresowany sprawdzeniem każdego przycisku radiowego, aby sprawdzić, czy jest on wybrany. Rozwiązanie to jest odmianą rozwiązań obsługi kliknięć, z których niektóre zostały już wspomniane w Stack Overflow. Wartością dodaną tego rozwiązania może być:

  1. Działa ze wzorcem starego kodu, z którym muszę pracować.
  2. Utworzyłem klasę pomocniczą, aby spróbować zmniejszyć liczbę instrukcji „if” w module obsługi kliknięcia oraz obsłużyć dowolną grupę przycisków opcji.

To rozwiązanie obejmuje

  1. Używanie innego modelu dla każdego przycisku opcji.
  2. Ustawienie atrybutu „zaznaczone” za pomocą modelu przycisku opcji.
  3. Przekazanie modelu klikniętego przycisku radiowego do klasy pomocnika.
  4. Klasa pomocnicza zapewnia, że ​​modele są aktualne.
  5. W „czasie przesyłania” umożliwia to staremu kodowi zbadanie stanu przycisków radiowych w celu sprawdzenia, który z nich został wybrany, sprawdzając modele.

Przykład:

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

...

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

...

Gdy użytkownik kliknie przycisk opcji, zostanie wywołana metoda selectButton klasy pomocniczej. Jest przekazywany model przycisku radiowego, który został kliknięty. Klasa pomocnicza ustawia pole logiczne „wybrane” przekazanego modelu na wartość true, a pole „wybrane” wszystkich innych modeli przycisków opcji ustawia na wartość fałsz.

Podczas inicjalizacji komponent musi skonstruować instancję klasy pomocniczej z listą wszystkich modeli przycisków opcji w grupie. W tym przykładzie „radioButtonGroupList” byłoby instancją klasy pomocniczej, której kod to:

 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");
    }
  }
}
user2367418
źródło
2

Przykład listy radia Angular 8:

Link do źródła

wprowadź opis obrazu tutaj

Odpowiedź 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,
                    }
                ]
            }
    ]

Szablon 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>
Code Spy
źródło
1

Najprostsze rozwiązanie i obejście:

<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
}
Jacek Pudysz
źródło
2
Jak w tym przypadku ustawić przycisk opcji na wartość domyślną od początku?
EricC
Byłaby również sytuacja, w której użytkownik często zmienia wybór, za każdym razem byłaby wymagana funkcja dla każdego sprawdzenia,
blackHawk
1

Utworzyłem wersję, używając tylko zdarzenia click na załadowanych elementach i przekazując wartość zaznaczenia do funkcji "getSelection" i aktualizując model.

W Twoim szablonie:

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

Twoja klasa:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Zobacz przykład: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

MrLukrative
źródło
1

O ile ta odpowiedź może nie być najlepsza w zależności od twojego przypadku użycia, działa. Zamiast używać przycisku Radio dla wyboru mężczyzny i kobiety, używanie <select> </select>działa doskonale, zarówno do zapisywania, jak i edycji.

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

Powyższe powinno wystarczyć do edycji przy użyciu FormGroup z patchValue. Do tworzenia możesz użyć [(ngModel)]zamiast formControlName. Nadal działa.

Prace hydrauliczne związane z pierwszym przyciskiem radiowym, zdecydowałem się zamiast tego wybrać. Wizualnie i pod względem UX nie wydaje się być najlepszy, ale z punktu widzenia programisty jest o wiele łatwiejszy.

KhoPhi
źródło
1

Włącz Zmień przycisk radiowy, pobierz wartość odpowiednich przycisków z tymi liniami

<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

Mahesh Guttedar
źródło
0

Oto kod, którego używam, który działa z Angular 7

(Uwaga: w przeszłości czasami korzystałem z informacji dostarczonych przez odpowiedź Anthony'ego Brenelière'a, które doceniam. Ale przynajmniej w przypadku Angular 7 ta część:

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

Okazało się, że jest to niepotrzebne.)

Moje rozwiązanie ma trzy zalety:

  1. Zgodne z najczęściej rekomendowanymi rozwiązaniami. Więc to jest dobre dla nowych projektów.
  2. Pozwala również, aby kod przycisku radiowego był podobny do kodu Flex / ActionScript. Jest to ważne osobiście, ponieważ tłumaczę kod Flexa na Angular. Podobnie jak kod Flex / ActionScript umożliwia pracę kodu z obiektem przycisku opcji w celu zaznaczenia lub usunięcia zaznaczenia lub sprawdzenia, czy przycisk opcji jest zaznaczony.
  3. W przeciwieństwie do większości rozwiązań, które zobaczysz, jest bardzo oparty na obiektach. Jedną z zalet jest organizacja: grupuje razem pola powiązań danych przycisku opcji, takie jak wybrane, włączone, widoczne i prawdopodobnie inne.

Przykładowy kod 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">

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

Używane są dwie klasy:

Klasa grupy przycisków opcji:

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

};

Klasa przycisku opcji

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

}
user2367418
źródło
-1

Może to nie jest właściwe rozwiązanie, ale jest to również opcja, mam nadzieję, że komuś pomoże.

Do tej pory otrzymywałem wartość radioButtons metodą (kliknięcie) w następujący sposób:

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

aw pliku .ts ustawiłem wartość predefiniowanej zmiennej na wartość onChangefunkcji pobierającej .

Ale po wyszukiwaniu znalazłem dobrą metodę, której jeszcze nie wypróbowałem, ale wydaje się, że ta jest dobra, używając [(ng-model)]linku tutaj do github tutaj . to jest używane RadioControlValueAccessordla radia, a także pole wyboru. tutaj jest praca # plnkr # dla tej metody tutaj .

Pardeep Jain
źródło