在模板驱动的表单中验证单选按钮的问题

// component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-my-form',
  templateUrl: './my-form.component.html'
})
export class MyFormComponent {
  user = {
    gender: ''
  };

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted:', form.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

<!-- component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label>Gender:</label>
    <input type="radio" name="gender" [(ngModel)]="user.gender" value="male" required> Male
    <input type="radio" name="gender" [(ngModel)]="user.gender" value="female" required> Female
  </div>
  <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>