Angular中mat-select的formControlName绑定失效致参数未定义问题

你遇到的问题很典型——模板里直接传country作为事件参数，但这个变量在当前模板作用域里根本不存在，所以才会一直是undefined。下面给你两种简单的解决办法：

方法一：通过$event获取选中值 #

修改你的mat-select的事件绑定，用$event.value来获取选中的国家值：

<mat-select placeholder="Country" formControlName="country" (selectionChange)="countryOfAddressChanged($event.value)">
  <mat-option *ngFor="let countryType of countryTypes" [value]="countryType">
    {{countryType | translate}}
  </mat-option>
</mat-select>

然后在组件的方法里接收这个值即可：

countryOfAddressChanged(selectedCountry: any) {
  // 这里就能拿到选中的countryType对象/值了
  console.log('选中的国家：', selectedCountry);
}

原理：selectionChange事件会触发MatSelectChange类型的事件对象，它的value属性就是你在mat-option里设置的[value]值，直接取这个属性就对了。

方法二：直接从FormControl中读取值 #

既然你用的是响应式表单，也可以完全不依赖事件参数，直接从表单控件里获取当前选中值：
先修改模板的事件绑定，去掉参数：

<mat-select placeholder="Country" formControlName="country" (selectionChange)="countryOfAddressChanged()">
  <mat-option *ngFor="let countryType of countryTypes" [value]="countryType">
    {{countryType | translate}}
  </mat-option>
</mat-select>

然后在组件方法里通过表单控件获取值：

countryOfAddressChanged() {
  // 从嵌套的表单组里获取country控件的值
  const selectedCountry = this.form.get('address.country')?.value;
  // 如果需要包含未通过验证的值，可以用getRawValue()
  // const selectedCountry = this.form.get('address.country')?.getRawValue();
  
  console.log('选中的国家：', selectedCountry);
}

这种方式更贴合响应式表单的设计思想，不需要依赖事件传递参数，直接从数据源（表单模型）获取数据。

补充说明 #

你之前误以为formControlName="country"会在模板里生成一个名为country的变量，这是误解——formControlName只是把当前控件和表单组里对应的FormControl做绑定，并不会在模板作用域中暴露这个变量，所以直接传country自然会是undefined。

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