嘿，这事儿不难！你已经把表单和验证器的基础架子搭好了，现在只需要针对每个验证规则做精准判断，就能分别显示对应的提示文本了。我给你一步步拆解：

第一步：简化你的TypeScript表单配置（可选，但更清晰） #

Angular现在已经支持直接把验证器放进数组里，不用再用Validators.compose了，代码更简洁：

this.Form = fb.group({
  'FooNumber': [null, [Validators.required, Validators.pattern('^[a-zA-Z0-9\-_]*$')]]
});

第二步：在HTML模板里精准判断错误类型 #

核心思路是通过表单控件的errors对象，分别检查required和pattern这两个验证器的错误状态，然后显示对应的提示。另外建议加上dirty或touched的判断，避免页面一加载就显示错误，提升用户体验：

<input 
  formControlName="FooNumber" 
  [ngClass]="{'inputRed': !fooNumberControl.valid, 'input': fooNumberControl.valid}"
/>

<!-- 错误提示区域 -->
<div class="error-msg" *ngIf="fooNumberControl.invalid && (fooNumberControl.dirty || fooNumberControl.touched)">
  <!-- 必填项错误提示 -->
  <p *ngIf="fooNumberControl.errors?.['required']">这个字段是必填项，请填写！</p>
  <!-- 格式错误提示（匹配你的正则规则） -->
  <p *ngIf="fooNumberControl.errors?.['pattern']">只能输入字母、数字、连字符(-)和下划线(_)，不允许其他特殊字符！</p>
</div>

小技巧：给表单控件起别名，简化模板代码 #

在组件类里定义一个getter，把表单控件存成变量，模板里写起来更省心，也不容易出错：

// 组件类里添加这个getter
get fooNumberControl() {
  return this.Form.get('FooNumber') as FormControl;
}

这样模板里就可以用fooNumberControl代替反复写this.Form.get('FooNumber')，代码更干净。

关键细节说明： #

• 使用errors?.['required']的安全导航操作符?.，可以避免控件还没初始化时出现null报错
• dirty表示用户已经修改过输入框内容，touched表示用户点击过输入框后又离开，两者结合能确保错误提示在用户操作后才显示，不会一开始就弹出来吓用户
• 每个错误提示对应一个验证器，这样用户就能清楚知道自己哪里错了，而不是看到模糊的“输入无效”提示

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