mat-select-country组件touched属性交互后始终返回false

mat-select-country作为第三方封装组件，内部未将控件的失焦、选择完成等交互状态同步给外层Angular表单的FormControl实例，因此即便用户完成了选择、点击等交互，绑定的country表单控件的touched属性始终不会自动更新为true，最终导致校验错误提示无法正常触发。
另外原代码存在一处拼写错误：校验文案中的requied正确拼写应为required。

方案1：绑定组件选择事件，主动标记控件为touched #

mat-select-country原生提供了onCountrySelected输出事件，用户完成国家选择时会触发该事件，可在事件回调中手动标记控件状态，修改后的模板代码如下：

<mat-select-country 
  label="" 
  placeHolder="" 
  formControlName="country" 
  [trimInput]="true"
  (onCountrySelected)="markCountryTouched()">
</mat-select-country>
<mat-error>
  {{ form.get('country').hasError('required') && form.get('country').touched ? 'This field is required' : '' }}
</mat-error>

在组件类中添加对应回调方法：

markCountryTouched(): void {
  this.form.get('country').markAsTouched();
}

如果需要覆盖用户点击控件但未选择任何值就失焦的场景，可以额外给组件绑定原生blur事件触发同样的标记逻辑即可。

方案2：监听控件值变化自动更新状态 #

如果不想额外添加模板事件，可以在组件初始化阶段直接监听country控件的值变化，只要值发生变动就自动标记为touched：

import { OnInit } from '@angular/core';
// ...
ngOnInit(): void {
  this.form.get('country').valueChanges.subscribe(() => {
    if (!this.form.get('country').touched) {
      this.form.get('country').markAsTouched();
    }
  });
}

两种方案都可以解决touched状态不更新的问题，修复后只要用户交互过该字段，必填校验的错误提示就可以正常展示。

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