Get boolean value form radio button on Reactive Form Angular

Question

I've this simple form on my Angular component.

  user: UserDTO;
  name: FormControl;
  attendee: FormControl;
  attendeeForm: FormGroup;

  constructor(
    private fb: FormBuilder,
  ) {
    this.user = new UserDTO('', '', '', 2, true);

    this.name = new FormControl(this.user.name, [
      Validators.required,
      Validators.minLength(3),
      Validators.maxLength(55),
    ]);

    this.attendee = new FormControl(this.user.attendee, Validators.required);

    this.attendeeForm = this.fb.group({
      name: this.name,
      status: 2,
      attendee: this.attendee,
    });
  }

And this is the HTML:

<h2>Formulari de registre</h2>
<form (ngSubmit)="registerAttendee()" [formGroup]="attendeeForm"  class="form-group">
  <mat-form-field >
     <input type="name" matInput placeholder="Name" required [formControl]="name">
  </mat-form-field>
  <div *ngIf="name.errors">
  <span style="color: red" *ngIf="name.errors && (name.touched || name.dirty)">
    <span *ngIf="name.errors['required']">El nom és requerit</span>
    <span *ngIf="name.errors['minlength']">El nom ha de tenir al menys tres caràcters</span>
    <span *ngIf="name.errors['maxlength']">El nom pot tenir màxim 55 caràcters</span>
  </span>
  </div>

  <p>Assistiràs?</p>
  <mat-radio-group aria-label="attendee">
     <mat-radio-button [value]="true" [formControl]="attendee">Sí</mat-radio-button>
     <mat-radio-button [value]="false" [formControl]="attendee">No</mat-radio-button>
  </mat-radio-group>
               
  <button type="submit" mat-raised-button color="primary [disabled]="!attendeeForm.valid">
     Enviar 
  </button>
</form>

How can I get the value of this radio button?

The result is always true because it takes it from new User by default. I have tried to do the same without starting the user but it doesn't work either. I have also read that the values received from a radio-button are of type "string", maybe this is the problem.

Surely it is a simple question but I don't know how to achieve it.

Answer 1

I think you need to set formControlName="attendee" on mat-radio-group. At the same time you can remove [formControl]="attendee" on the mat-radio-button-elements.

I made a minimal example where I log the selected radio-button-value when the form is submitted. Moreover I added some code that logs every change in the attendee-FormControl (You don't need this part of the code in your final version: It's just for you to see in the console that my solution actually works).

The TS-File:

constructor(private fb: FormBuilder) { 

    // Code omitted for brevity

    this.attendeeForm = this.fb.group({
        attendee: this.attendee,
    });

    // JUST FOR DEBUGGING (not needed in final code):
    // Log every change in the 'attendee'-FormControl:
    this.attendeeForm.get('attendee')?.valueChanges.subscribe(value => {
        console.log('Selected radio-button-value', value);
    });
}

onSubmit() {
    // Log the selected radio-button value on submit:
    const attendee = this.attendeeForm.get('attendee')?.value;
    console.log('Selected radio-button-value:', attendee);
}

And then the HTML-File:

<form [formGroup]="attendeeForm" (ngSubmit)="onSubmit()">
    <mat-radio-group formControlName="attendee">
        <mat-radio-button [value]="true">Si</mat-radio-button>
        <mat-radio-button [value]="false">No</mat-radio-button>
    </mat-radio-group>
    <br>
    <button type="submit">Submit</button>
</form>