Angular组件输入框触碰且无效时错误信息不显示问题排查

你的错误提示无法正常显示，核心是响应式表单的关联逻辑缺失，具体有三个关键问题：

1. 输入框未与FormControl绑定 #

模板中的原生<input>没有和组件内的name表单控件建立关联，Angular无法感知输入框的交互状态（如touched），错误判断逻辑自然不会触发。

修复：给input添加formControlName="name"属性，关联到表单组的对应控件：

<input type="text" id="name" name="name" placeholder="Enter your name" formControlName="name">

2. 缺少响应式表单模块导入 #

你使用了FormBuilder、FormGroup等响应式表单API，但组件仅导入了CommonModule，缺少ReactiveFormsModule会导致表单相关指令（如formControlName、formGroup）无法生效。

修复：在组件的imports数组中添加ReactiveFormsModule：

imports: [CommonModule, ReactiveFormsModule],

3. 表单标签未绑定FormGroup实例 #

<form>标签没有关联组件内的contactForm，Angular无法识别这是一个响应式表单，整个表单的状态追踪会失效。

修复：给form标签添加[formGroup]="contactForm"属性：

<form method="post" [formGroup]="contactForm">

完整修复后的代码示例 #

组件类代码 #

import { Component, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormBuilder, FormControl, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],
  template: `
    <form method="post" [formGroup]="contactForm">
      <label for="name">Name:</label>
      <div class="container">
        <input type="text" id="name" name="name" placeholder="Enter your name" formControlName="name">
        <div *ngIf="control?.touched && control?.invalid" class="error">
          <div *ngIf="control?.hasError('required')">Name is required.</div>
        </div>
      </div>
      
      <button type="submit">Submit</button>
    </form>
  `,
})
export class App implements OnInit {
  name = 'Angular';
  contactForm!: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    this.contactForm = this.fb.group({
      name: new FormControl('', [Validators.required]),
    });
  }

  get control(): FormControl {
    return this.contactForm.get('name') as FormControl;
  }
}

修改完成后，当输入框被触碰且内容为空时，错误提示即可正常显示。

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