Angular2 - Enlace de botones de radio

Quiero usar el botón de radio en un formulario usando 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/>

El valor inicial de model.options es 1

cuando se carga la página, el primer botón de opción no está marcado y las modificaciones no están vinculadas al modelo

Alguna idea ?

use [valor] = "1" en lugar de valor = "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/>

Editar:

Como sugiere thllbrg "Para uso angular 2.1+ en [(ngModel)]lugar de [(ng-model)]"

Nota: el enlace del botón de opción ahora es una función compatible en RC4 en adelante; consulte esta respuesta

Ejemplo de botón de opción usando RadioControlValueAccessor personalizado similar a CheckboxControlValueAccessor ( actualizado 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

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

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

Demostración en vivo de Plunker: http://plnkr.co/edit/aggee6An1iHfwsqGoE3q?p=preview

Mi solución manual, que implica la actualización manual model.optionscuando se selecciona un nuevo botón de opción:

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

Esto Plunkerdemuestra lo anterior, así como cómo usar un botón para cambiar el botón de opción seleccionado, es decir, para demostrar que el enlace de datos es bidireccional:

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

Esta es la mejor manera de usar botones de opción en Angular2. No hay necesidad de usar el evento (click) o un RadioControlValueAccessor para cambiar el valor de la propiedad enlazada, establecer la propiedad [comprobada] hace el truco.

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

Publiqué un ejemplo del uso de botones de opción : Angular 2: ¿cómo crear botones de opción a partir de enum y agregar enlaces bidireccionales? Funciona desde al menos Angular 2 RC5.

Este problema se resuelve en la versión Angular 2.0.0-rc.4, respectivamente en formularios.

Incluir "@angular/forms": "0.2.0"en package.json.

Luego extiende tu bootstrap en main. Parte relevante:

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

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

Tengo esto en .html y funciona perfectamente: valor: {{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>

Estaba buscando el método correcto para manejar esos botones de radio. Aquí hay un ejemplo de una solución que encontré aquí:

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

Observe el onSelectionChange que pasa el elemento actual al método.

La entrada de radio no parece ser compatible todavía. Debe haber un descriptor de acceso de radio valor de entrada (similar a la casilla uno , donde se pone 'comprobado' attr aquí ), pero no he encontrado ninguna. Así que implementé uno; puedes comprobarlo aquí .

[value] = "item" using * ngFor también funciona con Reactive Forms en Angular 2 y 4

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

Lo siguiente solucionó mi problema, considere agregar entrada de radio dentro de la formetiqueta y use la [value]etiqueta para mostrar el valor.

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

Aquí hay una solución que funciona para mí. Implica la vinculación del botón de opción, pero no a los datos comerciales, sino que se vincula al estado del botón de opción. Probablemente NO sea la mejor solución para nuevos proyectos, pero es apropiada para mi proyecto. Mi proyecto tiene una tonelada de código existente escrito en una tecnología diferente que estoy portando a Angular. El código antiguo sigue un patrón en el que el código está muy interesado en examinar cada botón de radio para ver si es el seleccionado. La solución es una variación de las soluciones del controlador de clic, algunas de las cuales ya se han mencionado en Stack Overflow. El valor agregado de esta solución puede ser:

1. Funciona con el patrón del código antiguo con el que tengo que trabajar.
2. Creé una clase de ayuda para intentar reducir el número de declaraciones "if" en el controlador de clic y para manejar cualquier grupo de botones de opción.

Esta solución implica

1. Usando un modelo diferente para cada botón de radio.
2. Establecer el atributo "comprobado" con el modelo del botón de opción.
3. Pasando el modelo del botón de radio en el que se hizo clic a la clase de ayuda.
4. La clase de ayuda se asegura de que los modelos estén actualizados.
5. En el "tiempo de envío", esto permite que el código antiguo examine el estado de los botones de opción para ver cuál está seleccionado al examinar los modelos.

Ejemplo:

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

...

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

...

Cuando el usuario hace clic en un botón de opción, se invoca el método selectButton de la clase auxiliar. Se pasa el modelo del botón de radio en el que se hizo clic. La clase auxiliar establece el campo booleano "seleccionado" del modelo pasado en verdadero y establece el campo "seleccionado" de todos los demás modelos de botones de opción en falso.

Durante la inicialización, el componente debe construir una instancia de la clase auxiliar con una lista de todos los modelos de botones de radio del grupo. En el ejemplo, "radioButtonGroupList" sería una instancia de la clase auxiliar cuyo código es:

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

Ejemplo de listado de radio de Angular 8:

Enlace de origen

Respuesta 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,
                    }
                ]
            }
    ]

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

Solución y solución alternativa más 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
}

Creé una versión usando solo un evento de clic en los elementos cargados y pasando el valor de la selección a la función "getSelection" y actualizando el modelo.

En tu plantilla:

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

Tu clase:

export class App {

  price:string;

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

  constructor() {   }

  model = new SomeData(this.price);

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

Ver ejemplo: https://plnkr.co/edit/2Muje8yvWZVL9OXqG0pW?p=info

Por mucho que esta respuesta no sea la mejor dependiendo de su caso de uso, funciona. En lugar de usar el botón de opción para una selección Masculina y Femenina, use los <select> </select>trabajos a la perfección, tanto para guardar como para editar.

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

Lo anterior debería funcionar bien, para editar usando FormGroup con patchValue. Para crear, puede usar en [(ngModel)]lugar de formControlName. Todavía funciona.

El trabajo de plomería involucrado con el botón de radio, elegí ir con la selección en su lugar. Desde el punto de vista visual y de UX, no parece ser el mejor, pero desde el punto de vista de un desarrollador, es mucho más fácil.

En el cambio de botón de radio, obtenga el valor de los botones respectivos con estas líneas

<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

Aquí hay un código que uso que funciona con Angular 7

(Nota: En el pasado, a veces usé información proporcionada por la respuesta de Anthony Brenelière, lo cual aprecio. Pero, al menos para Angular 7, esta parte:

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

Me pareció innecesario.)

Mi solución aquí tiene tres ventajas:

1. De acuerdo con las soluciones recomendadas más comúnmente. Por eso es bueno para nuevos proyectos.
2. También permite que el código de los botones de opción sea similar al código Flex / ActionScript. Esto es personalmente importante porque estoy traduciendo el código Flex a Angular. Al igual que el código Flex / ActionScript, permite que el código funcione en un objeto de botón de opción para marcar o desmarcar o averiguar si un botón de opción está marcado.
3. A diferencia de la mayoría de las soluciones que verá, está muy basado en objetos. Una ventaja es la organización: agrupa los campos de enlace de datos de un botón de opción, como seleccionado, habilitado, visible y posiblemente otros.

HTML de ejemplo:

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

TypeScript de ejemplo:

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

Se utilizan dos clases:

Clase de grupo de botones de 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;
    }
  }

};

Clase de botón de 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);
    }
  }

}

Esta puede no ser la solución correcta, pero esta también es una opción, espero que ayude a alguien.

Hasta ahora había obtenido el valor de radioButtons usando el método (clic) como el siguiente:

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

y en el archivo .ts he establecido el valor de la variable predefinida para obtener el valor de onChangefunción.

Pero después de buscar, encontré un buen método que aún no he probado, pero parece que este es bueno usando el [(ng-model)]enlace aquí para github aquí . esto se usa RadioControlValueAccessorpara la radio y también para la casilla de verificación. aquí está el # plnkr # de trabajo para este método aquí .