0
941
VistasAngular 5 Formas reactivas - Grupo de botones de radio
Tengo 2 botones de radio, estoy usando formularios reactivos y he agregado los controles de formulario dentro de mi componente. El problema al que me enfrento es que el atributo de nombre tiene que ser el mismo que formControlName. Cuando configuro el atributo de nombre como el mismo, solo puedo seleccionar 1 botón de opción; nunca puedo anular la selección y seleccionar el otro. Solo me permite seleccionar el mismo.
this.genderControl = new FormControl("", Validators.required);y luego agregado a mi grupo de formularios
genderControl: this.genderControl,Mi HTML:
<div class="radio-inline"> <input id="gender" type="radio" name="genderControl" formControlName="genderControl" /> <label class="radio-label"> Male</label> <input id="gender" type="radio" name="genderControl" formControlName="genderControl" /> <label class="radio-label">Female</label> </div>Grupo de formularios
this.personalInfo = new FormGroup({ searchControl: this.searchControl, titleControl: this.titleControl, firstNameControl: this.firstNameControl, middleNameControl: this.middleNameControl, lastNameControl: this.lastNameControl, birthdayControl: this.birthdayControl, genderControl: this.genderControl, phoneControl: this.phoneControl, taxCanadaControl: this.taxCanadaControl, provinceControl: this.provinceControl, countryControl: this.countryControl, taxCountryControl: this.taxCountryControl, creditControl: this.creditControl });2 Respuestas
Responde la pregunta0
Probé su código, no asignó/vinculó un valor a su formControlName.
En archivo HTML:
<form [formGroup]="form"> <label> <input type="radio" value="Male" formControlName="gender"> <span>male</span> </label> <label> <input type="radio" value="Female" formControlName="gender"> <span>female</span> </label> </form>En el archivo TS:
form: FormGroup; constructor(fb: FormBuilder) { this.name = 'Angular2' this.form = fb.group({ gender: ['', Validators.required] }); } Asegúrese de usar el formulario Reactivo correctamente: [formGroup]="form" y no necesita el atributo de nombre.
En mi muestra. las palabras male y female en las etiquetas de intervalo son los valores que se muestran a lo largo del botón de opción y los valores Male y Female están vinculados a formControlName
Ver la captura de pantalla: 
Para hacerlo más corto:
<form [formGroup]="form"> <input type="radio" value='Male' formControlName="gender" >Male <input type="radio" value='Female' formControlName="gender">Female </form> 
Espero eso ayude:)
0
SI desea derivar usg Boolean true False necesita agregar "[]" alrededor del valor
<form [formGroup]="form"> <input type="radio" [value]="true" formControlName="gender">Male <input type="radio" [value]="false" formControlName="gender">Female </form>