angular 表单提交校验控制的案列

以下是一个简单的 Angular 表单提交校验控制案例：

HTML 代码：

<form (ngSubmit)="onSubmit()" #myForm="ngForm">
  <div class="form-group">
    <label for="name">Name:</label>
    <input type="text" class="form-control" id="name" name="name" [(ngModel)]="name" required minlength="3">
    <div *ngIf="myForm.submitted && myForm.controls.name.errors" class="text-danger">
      <div *ngIf="myForm.controls.name.errors.required">
        Name is required.
      </div>
      <div *ngIf="myForm.controls.name.errors.minlength">
        Name must be at least 3 characters long.
      </div>
    </div>
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" name="email" [(ngModel)]="email" required email>
    <div *ngIf="myForm.submitted && myForm.controls.email.errors" class="text-danger">
      <div *ngIf="myForm.controls.email.errors.required">
        Email is required.
      </div>
      <div *ngIf="myForm.controls.email.errors.email">
        Invalid email format.
      </div>
    </div>
  </div>
  <button type="submit" class="btn btn-primary" [disabled]="!myForm.valid">Submit</button>
</form>

在上面的代码中，我们定义了一个表单，其中包含两个输入框：一个用于输入名称，另一个用于输入电子邮件地址。我们使用了 `ngModel` 指令来绑定输入框的值到组件中的属性，使用 `required` 和 `minlength` 校验器来验证名称输入框是否符合要求，使用 `required` 和 `email` 校验器来验证电子邮件输入框是否符合要求。

在每个输入框下面，我们使用了一个 `*ngIf` 结构来显示校验错误信息。如果表单已经提交且存在相应的错误，则显示相应的错误信息。

最后，我们在提交按钮上使用了一个 `[disabled]` 属性来禁用按钮，以防止用户在表单无效时提交表单。

TypeScript 代码：

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

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

  onSubmit() {
    console.log('Form submitted');
  }
}

在组件中，我们定义了 `name` 和 `email` 两个属性来存储输入框的值。在 `onSubmit` 方法中，我们只是简单地打印一条消息，表示表单已经提交。

注意，我们使用了 `NgForm` 类型来注入表单对象，以便在模板中使用表单的各种属性和方法。