Angular2 - Wiązanie przycisku radiowego

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

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

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

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>

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.

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>

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.

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 .

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

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>

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

Przykład listy radia Angular 8:

Link do źródła

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>

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
}

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

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.

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

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

}

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 .