单击提交按钮时，Angular 7表单验证不会显示错误

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

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

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // 其他表单字段...
    });
  }

  onSubmit() {
    // 手动检查表单验证状态并显示错误消息
    if (this.form.invalid) {
      // 循环检查每个表单字段的错误状态，并显示相应的错误消息
      Object.keys(this.form.controls).forEach(field => {
        const control = this.form.get(field);
        if (control.invalid) {
          // 根据字段名称显示错误消息
          switch (field) {
            case 'name':
              // 显示名称字段的错误消息
              break;
            case 'email':
              // 显示电子邮件字段的错误消息
              break;
            // 其他字段的错误消息...
          }
        }
      });
    } else {
      // 表单验证通过，执行提交操作
    }
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="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>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="form.controls.email.invalid && (form.controls.email.dirty || form.controls.email.touched)">
      <div *ngIf="form.controls.email.errors.required">Email is required.</div>
      <div *ngIf="form.controls.email.errors.email">Invalid email format.</div>
    </div>
  </div>
  <!-- 其他表单字段... -->
  <button type="submit">Submit</button>
</form>