I have a form using Reactive Form and Angular 6. I have two radio buttons
and when I click on them, the value doesn't change, nothing is printed in
the console.
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({
// Assign a default gender
gender: [this.genderValues[0], [
Validators.required
]]
});
radioChangeHandler(event: any) {
// Save the value
this.gender.setValue(event.target.value);
console.log(this.gender.value);
}
get gender() {
return this.signUpForm.get('gender');}
Is like the change event is no firing up. The idea is not firing any event,
I would like to assign the value of the selected radio to the "gender" in
the form group. I added the change event just for testing. Any idea?
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
