类型“事件”不可分配给类型“字符串”。 angular typescript 错误

Question

I'm very new to Angular and I've come across with a typescript problem.

This is the error that I'm getting:

Error: contact/contact.component.html:70:37 - error TS2322: Type 'Event' is not assignable to type 'string'.
     <mat-radio-group [(value)]="contactGender">
     <mat-radio-button value="male">Male</mat-radio-button>

contact/contact.component.ts:6:16
      templateUrl: './contact.component.html',

The part of my HTML component I'm getting the error on:

    <mat-label>Gender</mat-label>
    <mat-radio-group [(value)]="contactGender">
        <mat-radio-button value="male">Male</mat-radio-button>
        <mat-radio-button value="female">Female</mat-radio-button>
    </mat-radio-group>

My TS component:

import { Component} from '@angular/core';
import { FormControl } from '@angular/forms';
import {MatDatepickerModule} from '@angular/material/datepicker';

@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})


export class ContactComponent {
  date = new FormControl(new Date());
  serializedDate = new FormControl((new Date()).toISOString());

  contactGender:  string   =  "female";

    public  saveContact(){
      /* Typically this method will be used to send the contact form to a server to save it*/
    }
    constructor() { }

}

Where am I going wrong?

Answer 1

Change the HTML component that's giving the error to this. Here we bind the variable using ngModel not the value and put property binding on the value using []

 <mat-label>Gender</mat-label>
    <mat-radio-group [(ngModel)]="contactGender">
        <mat-radio-button [value]="male">Male</mat-radio-button>
        <mat-radio-button [value]="female">Female</mat-radio-button>
    </mat-radio-group>