Angular2 – Enlace de botón de radio

Quiero usar el botón de opción en un formulario usando Angular 2

Options : 
1 :
2 :

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 ?

usa [value] = “1” en lugar de value = “1”

 

Editar:

Como sugiere thllbrg “Para angular 2.1+ use [(ngModel)] lugar de [(ng-model)]

Nota: el enlace de botón de radio ahora es una función admitida en RC4 en adelante – vea esta respuesta

Ejemplo de botón de radio que usa RadioControlValueAccessor personalizado o 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

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

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 de model.options cuando se selecciona un nuevo botón de model.options :

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

Este Plunker demuestra lo anterior, y también 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:

  

Esta es la mejor manera de usar botones de opción en Angular2. No es necesario utilizar el evento (clic) o un RadioControlValueAccessor para cambiar el valor de la propiedad enlazada, la configuración de la propiedad [checked] hace el truco.

 

Publiqué un ejemplo de uso de botones de radio: Angular 2: cómo crear botones de radio desde 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.

Incluye "@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: value: {{buildTool}}

 
Gradle
Maven

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

  {{ entry.description }}     

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

La entrada de radio no parece ser compatible todavía. Debe haber un acceso de valor de entrada de radio (similar al de checkbox, donde establece ‘attr’ marcado aquí ) pero no encontré ninguno. Así que implementé uno; puedes verlo aquí .

[value] = “item” usando * ngPara también funciona con las formas reactivas en Angular 2 y 4

 ` 

La solución más simple y la solución alternativa:

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

Creé una versión usando solo un 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:

 
  • {{p}}

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

Aquí hay una solución que funciona para mí. Implica el enlace de botón de radio, pero no vincula con 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 apropiado para mi proyecto. Mi proyecto tiene una tonelada de código existente escrito en una tecnología diferente que transfiero a Angular. El código anterior 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 de manejo de clics, 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 de código antiguo con el que tengo que trabajar.
  2. Creé una clase auxiliar para intentar reducir el número de instrucciones “if” en el controlador de clic y para manejar cualquier grupo de botones de opción.

Esta solución involucra

  1. Usando un modelo diferente para cada botón de radio.
  2. Establecer el atributo “marcado” con el modelo del botón de opción.
  3. Pasar el modelo del botón de opción cliqueado a la clase de ayuda.
  4. La clase de ayuda se asegura de que los modelos estén actualizados.
  5. En “enviar hora”, esto permite que el código anterior examine el estado de los botones de opción para ver cuál se selecciona al examinar los modelos.

Ejemplo:

  

...

   

...

Cuando el usuario hace clic en un botón de opción, se invoca el método selectButton de la clase de ayuda. Se pasa el modelo del botón de opción que recibió el 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 opción en el 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"); } } } 

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 seleccionar hombres y mujeres, usar funciona perfectamente, tanto para guardar como para editar.

  

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

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

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) de la siguiente manera:

 Male Female 

y en el archivo .ts he establecido el valor de la variable predefinida en el valor getter de la función onChange .

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

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

 
  {{ item.name }}