Angular Material 8 单选按钮值作为 boolean

Question

I have a simple website with 2 properties: One radio button group (with 2 radio buttons) and an input field (text field)

What I'm trying to do is once the user submits the form, the boolean value of the selected radio button and the value of the input field should be saved. For the input field this works without any problem, but for some reason the value of the radio button is just left out and doesn't appear anywhere. This is what I got so far:

<mat-radio-group label="Select an option" formControlName="membership" #membership>
   <mat-radio-button [value]=true color="primary">Yes</mat-radio-button>
   <br>
   <mat-radio-button [value]=false color="primary">No</mat-radio-button>
</mat-radio-group>

The submission button:

<button mat-button type="submit" (click)="addWish(membership.value, wish.value)">Submit</button>

And the form builder as follows:

this.createForm = this.fb.group({
      membership: [[false], Validators.required],
      wish: ''
    });

Does anyone have an idea why the membership value is just left out at submission? Thanks in advance!

Answer 1

How about adding ngModel:

<mat-radio-group label="Select an option" name="membership" [(ngModel)]="membership">
                <mat-radio-button [value]=true color="primary">Yes</mat-radio-button>
                <br>
                <mat-radio-button [value]=false color="primary">No</mat-radio-button>
             </mat-radio-group>
             <button mat-button type="submit" (click)="addWish(membership)">Submit</button>

and in.ts:

addWish(item){
  console.log(item);
}