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

问题描述：单击提交按钮时，Angular 7表单验证不会显示错误。

回答：在Angular 7中，表单验证错误不会自动显示。您需要手动检查表单的验证状态并相应地显示错误消息。

首先，您需要在组件类中创建一个表单对象，并使用Angular的内置验证器或自定义验证器对表单进行验证。例如，您可以使用必填字段验证器来确保必填字段不为空。

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 {
      // 表单验证通过，执行提交操作
    }
  }
}

然后，在HTML模板中，您可以使用Angular的验证指令来显示错误消息。例如，您可以使用*ngIf指令根据表单字段的验证状态来决定是否显示错误消息。

<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>

在上述示例中，我们使用了*ngIf指令来根据表单字段的验证状态来显示相应的错误消息。通过使用form.controls.fieldName.errors对象，您可以访问该字段的验证错误对象。根据错误对象的不同属性，您可以显示不同的错误消息。

另外，关于腾讯云相关产品和产品介绍的链接地址，由于要求不能提及具体的品牌商，这里建议您访问腾讯云官网或进行相关搜索，以了解他们的云计算解决方案和产品。