Radio button value in Angular reactive form is null

Question

So I am struggling with adding radio buttons to my reactive form in my angular app. I am using the material radio buttons and there are two choices: one is client and one is trainer.

They look ok but unfortunately when I try to submit the form I notice that the value of the radio button form control is null despite the fact that I had selected a value. Can someone see what I did wrong?

the sign in template

<h2 class="title">Sign in!</h2>

<form [formGroup]="signInForm" (ngSubmit)="onSubmit()">
  <mat-radio-group aria-label="Select an option">
    <mat-radio-button formGroupName="type" value="trainer">Trainer</mat-radio-button>
    <mat-radio-button formGroupName="type" value="client">Client</mat-radio-button>
  </mat-radio-group>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" formControlName="email" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" formControlName="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Component code that handles the form

ngOnInit() {
    this.signInForm = new FormGroup({
      email: new FormControl(null, [
        Validators.email,
        Validators.required]),
      password: new FormControl( null, [
        Validators.required
      ]),
      type: new FormControl(null)
    });
  }


 onSubmit() {
    console.log('valid form', this.signInForm.valid);
    this.getFormValidationErrors();
    const data = {
      email: this.signInForm.value.email,
      password: this.signInForm.value.password,
      type: this.signInForm.value.type
    };
    console.log('type6', data);

    this.authService.signIn(data)
      .subscribe((res) => {
        console.log('RES');
      });
  }

This is what it looks like, there's a console.log of the for data in the console on the right side. As you can see the control 'type' has value null

It would help a lot if you could add rest of the code to stackblitz — Alex
– Alex, Commented Apr 5, 2019 at 23:01

Alex · Accepted Answer · 2019-04-05 23:22:42Z

1

To achieve this you can use formControlName on mat-radio-group

<mat-radio-group formControlName="type">
 <mat-radio-button value="trainer">Trainer</mat-radio-button>
 <mat-radio-button value="client">Client</mat-radio-button>
</mat-radio-group>

edited Apr 5, 2019 at 23:22

answered Apr 5, 2019 at 23:03

Alex

4297 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Radio button value in Angular reactive form is null

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related