Estoy usando Angular 6.2.7 y tengo un formulario con Reactive Form en el cual tengo un radio group con dos radio button.
HTML:
<form
[formGroup]="signUpForm"
(ngSubmit)="onSubmit()">
<div class="radio">
<div *ngFor="let gender of genderValues">
<label>
<input
formControlName="gender"
value="{{gender}}"
type="radio"
name="gender"
(change)="radioChangeHandler($event)">
{{gender === 'Male' ? 'Hombre' : 'Mujer'}}
</label>
</div>
</div>
</form>
TS:
signUpForm: FormGroup;
genderValues = ['Male', ' Female'];
constructor(private formBuilder: FormBuilder) {
}
this.signUpForm = this.formBuilder.group({
// Asigno un gender como default
gender: [this.genderValues[0], [
Validators.required
]]
});
radioChangeHandler(event: any) {
// Guardar value nuevo
this.gender.setValue(event.target.value);
console.log(this.gender.value);
}
get gender() {
return this.signUpForm.get('gender');
}
El radioChangeHandler
no funciona. Cuando seleccionas uno de los dos radio button el valor no cambia y no se guarda. He intentado varias formas que he encontrado en Internet y no he tenido éxito.
Gracias de antemano.