Angular form一次显示一条错误消息

<form>
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="name" required>
    <div *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched)">
      <div *ngIf="form.controls.name.errors.required">Name is required.</div>
    </div>
  </div>
</form>

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-form',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css']
})
export class FormComponent {
  form: FormGroup;

  constructor() {
    this.form = new FormGroup({
      name: new FormControl('', Validators.required),
      // 添加其他表单控件
    });
  }
}

<form [formGroup]="form">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" formControlName="name">
    <div *ngIf="form.controls.name.invalid && (form.controls.name.dirty || form.controls.name.touched)">
      <div *ngIf="form.controls.name.errors.required">Name is required.</div>
    </div>
  </div>
</form>