Angular2 – Radio Button Binding

Voglio utilizzare il pulsante di opzione in una forma utilizzando Angular 2

Options : 
1 :
2 :

model.options il valore iniziale è 1

quando la pagina viene caricata, il primo pulsante radio non viene controllato e le modifiche non sono vincolate al modello

Qualche idea ?

    usa [valore] = “1” invece di valore = “1”

     

    Modificare:

    Come suggerito da thllbrg “Per angular 2.1+ uso [(ngModel)] invece di [(ng-model)]

    Nota: il collegamento del pulsante di opzione è ora una funzione supportata in RC4 in poi: vedere questa risposta

    Esempio di pulsante radio utilizzando RadioControlValueAccessor personalizzato simile a CheckboxControlValueAccessor ( aggiornato con 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

     
    Male
    Female
    Selected Radio: {{model.sex}}

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

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

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

    La mia soluzione manuale, che prevede l’aggiornamento manuale di model.options quando viene selezionato un nuovo pulsante di opzione:

     template: ` ` class App { radioItems = 'one two three'.split(' '); model = { options: 'two' }; } 

    Questo Plunker dimostra quanto sopra, nonché come utilizzare un pulsante per modificare il pulsante di opzione selezionato, ad esempio per dimostrare che l’associazione dati è bidirezionale:

      

    Ecco il modo migliore per utilizzare i pulsanti di opzione in Angular2. Non è necessario utilizzare l’evento (clic) o RadioControlValueAccessor per modificare il valore della proprietà binded, l’impostazione della proprietà [checked] fa il trucco.

     

    Ho pubblicato un esempio di utilizzo dei pulsanti di opzione : Angolare 2: come creare pulsanti di opzione da enum e aggiungere un collegamento a due vie? Funziona almeno da Angular 2 RC5.

    Questo problema è risolto nella versione Angular 2.0.0-rc.4, rispettivamente nelle forms.

    Includi "@angular/forms": "0.2.0" in package.json.

    Quindi estendi il tuo bootstrap in main. Parte pertinente:

     ... import { AppComponent } from './app/app.component'; import { disableDeprecatedForms, provideForms } from '@angular/forms'; bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), appRouterProviders ]); 

    Ho questo in .html e funziona perfettamente: value: {{buildTool}}

     
    Gradle
    Maven

    Stavo cercando il metodo giusto per gestire quei pulsanti radio ecco un esempio per una soluzione che ho trovato qui:

      {{ entry.description }}     

    Notare onSelectionChange che passa l’elemento corrente al metodo.

    L’input radio non sembra essere ancora supportato. Dovrebbe esserci un accessor del valore di ingresso della radio (simile a quello della casella di spunta, dove viene impostato ‘checked’ attr qui ) ma non ne ho trovato nessuno. Quindi ne ho implementato uno; puoi verificarlo qui .

    [value] = “item” usando * ngFor funziona anche con Reactive Forms in Angular 2 e 4

     ` 

    La soluzione più semplice e soluzione alternativa:

       setToRentControl(value){ this.vm.toRent.updateValue(value); alert(value); //true/false } 

    Ho creato una versione utilizzando solo un evento click sugli elementi caricati e passando il valore della selezione nella funzione “getSelection” e aggiornando il modello.

    Nel tuo modello:

     
    • {{p}}

    La tua class:

     export class App { price:string; price = ["1000", "2000", "3000"]; constructor() { } model = new SomeData(this.price); getValue(price){ this.model.price = price; } } 

    Guarda l’esempio: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

    Ecco una soluzione che funziona per me. Implica il binding del pulsante radio, ma non è vincolante per i dati aziendali, ma è vincolante per lo stato del pulsante di opzione. Probabilmente non è la soluzione migliore per i nuovi progetti, ma è appropriata per il mio progetto. Il mio progetto ha un sacco di codice esistente scritto in una tecnologia diversa che porto a Angular. Il vecchio codice segue uno schema in cui il codice è molto interessato all’esame di ciascun pulsante di opzione per vedere se è selezionato. La soluzione è una variante delle soluzioni di gestione dei clic, alcune delle quali sono già state citate su Stack Overflow. Il valore aggiunto di questa soluzione potrebbe essere:

    1. Funziona con lo schema del vecchio codice con cui devo lavorare.
    2. Ho creato una class helper per cercare di ridurre il numero di istruzioni “if” nel gestore dei clic e di gestire qualsiasi gruppo di pulsanti di opzione.

    Questa soluzione comporta

    1. Utilizzando un modello diverso per ciascun pulsante di opzione.
    2. Impostazione dell’attributo “checked” con il modello del pulsante radio.
    3. Passando il modello del pulsante di selezione cliccato alla class helper.
    4. La class helper si assicura che i modelli siano aggiornati.
    5. Al “submit time” questo consente al vecchio codice di esaminare lo stato dei pulsanti radio per vedere quale viene selezionato esaminando i modelli.

    Esempio:

      

    ...

       

    ...

    Quando l'utente fa clic su un pulsante di opzione, viene richiamato il metodo selectButton della class helper. Viene passato il modello per il pulsante di opzione su cui è stato fatto clic. La class helper imposta il campo "selezionato" booleano del modello passato in true e imposta su falso il campo "selezionato" di tutti gli altri modelli di pulsanti radio.

    Durante l'inizializzazione il componente deve build un'istanza della class helper con un elenco di tutti i modelli di pulsanti di opzione nel gruppo. Nell'esempio, "radioButtonGroupList" sarebbe un'istanza della class helper il cui codice è:

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

    Per quanto questa risposta potrebbe non essere la migliore a seconda del tuo caso d’uso, funziona. Invece di usare il pulsante Radio per selezionare Maschio e Femmina, usare funziona perfettamente, sia per il salvataggio che per la modifica.

      

    Quanto sopra dovrebbe andare bene, per la modifica usando FormGroup con patchValue . Per la creazione, puoi usare [(ngModel)] invece di formControlName . Funziona ancora.

    L’impianto idraulico coinvolto con il pulsante radio uno, ho scelto di andare con la selezione, invece. Visivamente e UX-saggio, non sembra essere il migliore, ma dal punto di vista di uno sviluppatore, è un sacco più facile.

    Questa potrebbe non essere la soluzione corretta ma questa è anche l’opzione spero che possa aiutare qualcuno.

    Fino ad ora ho ottenuto il valore di radioButton usando il metodo (clic) come segue:

     Male Female 

    e nel file .ts ho impostato il valore della variabile predefinita sul valore getter della funzione onChange .

    Ma dopo aver cercato ho trovato un buon metodo che non ho ancora provato ma sembra che questo sia buono usando il link [(ng-model)] qui per github qui . questo utilizza RadioControlValueAccessor per la radio e anche la casella di controllo. ecco il #nnkr # di lavoro per questo metodo qui .

    Quanto segue risolve il mio problema, per favore considera di aggiungere l’ingresso radio all’interno del tag form e usa il tag [value] per visualizzare il valore.

     
      {{ item.name }}