触摸输入无效时不显示错误消息

Question

我正在开发一个 Angular 组件，如果输入字段被触摸并且无效，我想在该组件中显示错误消息。但是，错误消息并未按预期出现。

错误消息“姓名为必填项。”当输入字段被触摸并留空（无效）时应该出现。 应使用纯 HTML，而不是 Angular Material 输入组件。 但是，它没有显示出来。可能是什么原因导致这个问题？

下面是我的代码：

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <form method="post">
      <label for="name">Name:</label>
      <div class="container">
        <input type="text" id="name" name="name" placeholder="Enter your 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 {
  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;
  }
}

堆栈闪电战

Answer 1

反应式表单必须在表单根部定义

[formGroup]

。

<form [formGroup]="contactForm">

还使用默认对象初始化表单，这将有助于表单初始化。

name = 'Angular';
contactForm: FormGroup =  new FormGroup({});

您必须添加反应式表单模块的导入。

import {
  FormBuilder,
  FormControl,
  FormGroup,
  ReactiveFormsModule,
  Validators,
} from '@angular/forms';
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, ReactiveFormsModule],