0

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.

1 respuesta 1

1

Pienso que en vez de enviar el evento pueder enviar el género

(change)="radioChangeHandler(gender)"

radioChangeHandler(gender: string) {
  this.gender.setValue(gender);
  console.log(this.gender.value);
}
2
  • Así es, el evento solo envía true o false para el radiobutton seleccionado y deseleccionado, respectivamente. el 20 ene. 2019 a las 19:41
  • No me funciona. Al hacer clic en los radio button no se imprime nada en consola. Es como si el (change) no funcionara y por ende no envía nada a la función radioChangeHandler. Alguna idea?
    – RRGT19
    el 21 ene. 2019 a las 17:26

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.