Angular Material单选框与日期选择框无法获取值问题排查

你的表单提交后捕获不到性别和出生日期的值，核心原因是这两个控件没有配置NgForm所需的关键属性，导致表单无法追踪它们的值。

具体问题与修复步骤 #

1. 性别单选组（mat-radio-group） #

mat-radio-group作为单选按钮的容器，必须添加name属性和ngModel指令，NgForm才能识别这个控件组并捕获选中值。你之前的代码里完全缺失这两个配置。

修改后：

<mat-radio-group 
  aria-label="Gender" 
  name="gender"
  ngModel
>
  <mat-radio-button value="male">Male</mat-radio-button>
  <mat-radio-button value="female">Female</mat-radio-button>
</mat-radio-group>

注：把value从"true"/"false"改成"male"/"female"更语义化，后续处理数据更清晰

2. 日期选择器（mat-datepicker） #

日期选择器的input标签缺少name属性和ngModel指令，导致NgForm无法追踪它的输入值。

修改后：

<mat-form-field appearance="fill">
  <mat-label>Birthdate</mat-label>
  <input 
    matInput 
    [matDatepicker]="picker" 
    name="birthdate"
    ngModel
  />
  <mat-hint>MM/DD/YYYY</mat-hint>
  <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

完整修改后的HTML代码 #

<mat-toolbar>
  <span>Registration</span>
</mat-toolbar>

<mat-card-content>
  <form #signupform="ngForm" (ngSubmit)="onSubmit(signupform)">
    <mat-card class="my-card">
      <mat-card-content>
        <mat-form-field appearance="fill">
          <mat-label>First Name</mat-label>
          <input
            matInput
            type="text"
            placeholder="First name"
            name="firstname"
            ngModel
          />
        </mat-form-field>

        &nbsp;
        <mat-form-field appearance="fill">
          <mat-label>Last Name</mat-label>
          <input
            matInput
            type="text"
            placeholder="Last Name"
            name="lastname"
            ngModel
          />
        </mat-form-field>

        &nbsp;
        <mat-form-field appearance="fill">
          <mat-label>email</mat-label>
          <input matInput type="email" name="email" ngModel />
        </mat-form-field>

        &nbsp;

        <mat-form-field appearance="fill">
          <mat-label>Phone number</mat-label>
          <input matInput type="text" name="phone" ngModel />
        </mat-form-field>

        &nbsp;
        <mat-form-field appearance="fill">
          <mat-label>Password</mat-label>
          <input
            matInput
            type="password"
            placeholder="Password"
            name="password"
            ngModel
          />
        </mat-form-field>

        &nbsp;
        <mat-form-field appearance="fill">
          <mat-label>Country</mat-label>
          <mat-select name="country" ngModel>
            <mat-option value="Italy">Italy</mat-option>
            <mat-option value="France">France</mat-option>
            <mat-option value="Spain">Spain</mat-option>
            <mat-option value="Netherlands">Netherlands</mat-option>
            <mat-option value="Germany">Germany</mat-option>
          </mat-select>
        </mat-form-field>

        &nbsp;

        <mat-form-field appearance="fill">
          <mat-label>Birthdate</mat-label>
          <input 
            matInput 
            [matDatepicker]="picker" 
            name="birthdate"
            ngModel
          />
          <mat-hint>MM/DD/YYYY</mat-hint>
          <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
          <mat-datepicker #picker></mat-datepicker>
        </mat-form-field>

        &nbsp;

        <mat-radio-group 
          aria-label="Gender" 
          name="gender"
          ngModel
        >
          <mat-radio-button value="male">Male</mat-radio-button>
          <mat-radio-button value="female">Female</mat-radio-button>
        </mat-radio-group>
      </mat-card-content>
      
      <!-- REGISTER BUTTON -->
      <mat-card-actions>
        <button mat-raised-button color="primary" type="submit">INVIA</button>
      </mat-card-actions>
    </mat-card>
  </form>
</mat-card-content>

可选优化：双向绑定到组件属性 #

如果需要在组件类中直接操作这两个值，可以用双向绑定语法[(ngModel)]：

1. 在组件类中定义属性：

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

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent {
  // 定义表单数据对象
  formData = {
    gender: '',
    birthdate: null
  };

  onSubmit(form: NgForm) {
    console.log(form.value); // 现在能看到gender和birthdate的值了
    console.log(this.formData); // 双向绑定的属性也会同步更新
  }
}

2. 修改HTML中的绑定：

<!-- 日期选择器 -->
<input 
  matInput 
  [matDatepicker]="picker" 
  name="birthdate"
  [(ngModel)]="formData.birthdate"
/>

<!-- 单选组 -->
<mat-radio-group 
  aria-label="Gender" 
  name="gender"
  [(ngModel)]="formData.gender"
>

内容的提问来源于stack exchange，提问作者Riccardo Migliaccio