响应式表单中自定义控件结合Validators.required不显示必填指示器的疑问

模板代码 #

<div [formGroup]="form">
  <mat-form-field>
    <mat-label>Phone number</mat-label>
    <example-tel-input formControlName="tel"></example-tel-input>
    <mat-icon matSuffix>phone</mat-icon>
    <mat-hint>Include area code</mat-hint>
  </mat-form-field>
  <mat-form-field>
    <mat-label>Mobile number</mat-label>
    <input type="text" matInput formControlName="mobile" />
  </mat-form-field>
</div>

表单验证配置 #

form: FormGroup = new FormGroup({
  tel: new FormControl(null, [Validators.required]),
  mobile: new FormControl(null, [Validators.required]),
});

通过上述代码为两个控件设置必填验证后，使用MatInput的mobile控件会自动显示必填指示器（*），但自定义的example-tel-input控件却不会。

官方文档提到：

请注意required属性仍需保留在模板中。虽然它对验证来说并非必需，但出于无障碍访问的目的应予以保留。

这意味着自定义组件需要在模板中手动添加required属性才能显示必填指示器：

<example-tel-input formControlName="tel" required></example-tel-input>

针对这个情况有两点疑问：

• 手动添加required属于重复代码，因为已经在FormControl中配置了必填验证
• 为何MatInput能自动识别FormControl中的required验证器并显示指示器，自定义控件却做不到？

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