如何在单击Angular 6TS时验证3表单

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

export class YourComponent {
  form: FormGroup;

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }
}

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="form.get('name').invalid && form.get('name').touched">
      <div *ngIf="form.get('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.get('email').invalid && form.get('email').touched">
      <div *ngIf="form.get('email').errors.required">Email is required.</div>
      <div *ngIf="form.get('email').errors.email">Invalid email format.</div>
    </div>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" formControlName="password">
    <div *ngIf="form.get('password').invalid && form.get('password').touched">
      <div *ngIf="form.get('password').errors.required">Password is required.</div>
      <div *ngIf="form.get('password').errors.minlength">Password must be at least 6 characters long.</div>
    </div>
  </div>
  <button type="submit" [disabled]="form.invalid">Submit</button>
</form>

export class YourComponent {
  // ...

  onSubmit() {
    if (this.form.valid) {
      // 表单验证通过，执行进一步的操作
      console.log(this.form.value);
    }
  }
}