Angular2 - Reliure par bouton radio

Je souhaite utiliser le bouton radio dans un formulaire utilisant 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/>

La valeur initiale de model.options est 1

lorsque la page est chargée, le premier bouton radio n'est pas coché et les modifications ne sont pas liées au modèle

Une idée ?

utilisez [value] = "1" au lieu de 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/>

Éditer:

Comme suggéré par thllbrg "Pour angular 2.1+ utiliser à la [(ngModel)]place de [(ng-model)]"

Remarque - la liaison de bouton radio est désormais une fonctionnalité prise en charge dans RC4 et les versions ultérieures - voir cette réponse

Exemple de bouton radio utilisant RadioControlValueAccessor personnalisé similaire à CheckboxControlValueAccessor ( mis à jour avec 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; }
}

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

Démo en direct de Plunker: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

Ma solution de contournement manuelle, qui consiste à mettre à jour manuellement model.optionslorsqu'un nouveau bouton radio est sélectionné:

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

Cela Plunkerdémontre ce qui précède, ainsi que la façon d'utiliser un bouton pour changer le bouton radio sélectionné, c'est-à-dire pour prouver que la liaison de données est bidirectionnelle:

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

Voici la meilleure façon d'utiliser les boutons radio dans Angular2. Il n'est pas nécessaire d'utiliser l'événement (click) ou un RadioControlValueAccessor pour modifier la valeur de la propriété liée, la définition de la propriété [cochée] fait l'affaire.

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

J'ai publié un exemple d'utilisation de boutons radio: Angular 2: comment créer des boutons radio à partir d'énumération et ajouter une liaison bidirectionnelle? Cela fonctionne à partir d'au moins Angular 2 RC5.

Ce problème est résolu dans la version Angular 2.0.0-rc.4, respectivement dans les formulaires.

Inclure "@angular/forms": "0.2.0"dans package.json.

Ensuite, étendez votre bootstrap dans main. Partie pertinente:

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

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

J'ai ceci en .html et fonctionne parfaitement: value: {{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>

Je cherchais la bonne méthode pour gérer ces boutons radio, voici un exemple de solution que j'ai trouvée ici:

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

Notez le onSelectionChange qui passe l'élément actuel à la méthode.

L'entrée radio ne semble pas encore prise en charge. Il devrait y avoir un accesseur de valeur d'entrée radio (similaire à la case de l'une , où il fixe « checked » attr ici ) mais je ne trouve pas. Alors j'en ai implémenté un; vous pouvez le vérifier ici .

[value] = "item" utilisant * ngFor fonctionne également avec les formes réactives dans Angular 2 et 4

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

Ce qui suit a résolu mon problème, pensez à ajouter une entrée radio à l'intérieur de la formbalise et utilisez la [value]balise pour afficher la valeur.

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

Voici une solution qui fonctionne pour moi. Cela implique une liaison de bouton radio - mais pas de liaison aux données commerciales, mais plutôt une liaison à l'état du bouton radio. Ce n'est probablement PAS la meilleure solution pour les nouveaux projets, mais convient à mon projet. Mon projet contient une tonne de code existant écrit dans une technologie différente que je porte sur Angular. L'ancien code suit un modèle dans lequel le code est très intéressé à examiner chaque bouton radio pour voir s'il s'agit de celui sélectionné. La solution est une variante des solutions de gestion des clics, dont certaines ont déjà été mentionnées sur Stack Overflow. La valeur ajoutée de cette solution peut être:

1. Fonctionne avec le modèle de l'ancien code avec lequel je dois travailler.
2. J'ai créé une classe d'assistance pour essayer de réduire le nombre d'instructions "if" dans le gestionnaire de clics et pour gérer n'importe quel groupe de boutons radio.

Cette solution implique

1. Utilisation d'un modèle différent pour chaque bouton radio.
2. Définition de l'attribut "vérifié" avec le modèle du bouton radio.
3. Passer le modèle du bouton radio cliqué à la classe d'assistance.
4. La classe d'assistance s'assure que les modèles sont à jour.
5. Au «temps de soumission», cela permet à l'ancien code d'examiner l'état des boutons radio pour voir lequel est sélectionné en examinant les modèles.

Exemple:

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

...

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

...

Lorsque l'utilisateur clique sur un bouton radio, la méthode selectButton de la classe d'assistance est appelée. Il est passé le modèle pour le bouton radio qui a été cliqué. La classe d'assistance définit le champ booléen "selected" du modèle transmis sur true et définit le champ "selected" de tous les autres modèles de boutons radio sur false.

Lors de l'initialisation, le composant doit construire une instance de la classe d'assistance avec une liste de tous les modèles de boutons radio du groupe. Dans l'exemple, "radioButtonGroupList" serait une instance de la classe d'assistance dont le code est:

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

Exemple de liste de radio angulaire 8:

Lien source

Réponse 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,
                    }
                ]
            }
    ]

Modèle 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>

Solution et solution de contournement les plus simples:

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

J'ai créé une version en utilisant juste un événement de clic sur les éléments chargés et en passant la valeur de la sélection dans la fonction "getSelection" et en mettant à jour le modèle.

Dans votre modèle:

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

Ta classe:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Voir exemple: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Même si cette réponse n'est peut-être pas la meilleure en fonction de votre cas d'utilisation, cela fonctionne. Au lieu d'utiliser le bouton radio pour une sélection masculine et féminine, utiliser <select> </select>parfaitement les œuvres, à la fois pour l'enregistrement et l'édition.

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

Ce qui précède devrait très bien faire l'affaire, pour l'édition à l'aide de FormGroup avec patchValue. Pour créer, vous pouvez utiliser à la [(ngModel)]place du fichier formControlName. Fonctionne encore.

Les travaux de plomberie impliqués avec le bouton radio un, j'ai choisi d'aller avec le sélectionner à la place. Visuellement et en termes d'UX, cela ne semble pas être le meilleur, mais du point de vue d'un développeur, c'est beaucoup plus facile.

Lors du changement de bouton radio, obtenez la valeur des boutons respectifs avec ces lignes

<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

Voici un code que j'utilise qui fonctionne avec Angular 7

(Note: Dans le passé, j'utilisais parfois les informations fournies par la réponse d'Anthony Brenelière, ce que j'apprécie. Mais, au moins pour Angular 7, cette partie:

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

J'ai trouvé que c'était inutile.)

Ma solution ici présente trois avantages:

1. Conforme aux solutions les plus couramment recommandées. C'est donc bon pour les nouveaux projets.
2. Permet également au code de bouton radio d'être similaire au code Flex / ActionScript. Ceci est personnellement important car je traduis du code Flex en Angular. Comme le code Flex / ActionScript, il permet au code de fonctionner sur un objet bouton radio pour cocher ou décocher ou découvrir si un bouton radio est coché.
3. Contrairement à la plupart des solutions que vous verrez, elle est très basée sur les objets. Un avantage est l'organisation: il regroupe les champs de liaison de données d'un bouton radio, tels que sélectionné, activé, visible et éventuellement d'autres.

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

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

Deux classes sont utilisées:

Classe de groupe de boutons 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;
    }
  }

};

Classe de bouton 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);
    }
  }

}

Ce n'est peut-être pas la bonne solution, mais celle-ci est également une option, espérons qu'elle aidera quelqu'un.

Jusqu'à présent, j'avais obtenu la valeur de radioButtons en utilisant la méthode (clic) comme suit:

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

et dans le fichier .ts, j'ai défini la valeur de la variable prédéfinie sur la valeur de lecture de la onChangefonction.

Mais après avoir cherché, j'ai trouvé une bonne méthode que je n'ai pas encore essayée, mais il semble que celle-ci soit bonne en utilisant le [(ng-model)]lien est ici pour github ici . ceci est utilisé RadioControlValueAccessorpour la radio ainsi que la case à cocher aussi. voici le # plnkr # de travail pour cette méthode ici .