使用angular 11进行动态表单输入验证

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

@NgModule({
  imports: [
    FormsModule,
    ReactiveFormsModule
  ],
  ...
})
export class AppModule { }

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

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

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    if (this.myForm.valid) {
      // 处理表单提交逻辑
    }
  }
}

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">姓名:</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="myForm.get('name').invalid && myForm.get('name').touched">
      <div *ngIf="myForm.get('name').hasError('required')">姓名是必填项。</div>
    </div>
  </div>

  <div>
    <label for="email">邮箱:</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="myForm.get('email').invalid && myForm.get('email').touched">
      <div *ngIf="myForm.get('email').hasError('required')">邮箱是必填项。</div>
      <div *ngIf="myForm.get('email').hasError('email')">请输入有效的邮箱地址。</div>
    </div>
  </div>

  <div>
    <label for="password">密码:</label>
    <input type="password" id="password" formControlName="password">
    <div *ngIf="myForm.get('password').invalid && myForm.get('password').touched">
      <div *ngIf="myForm.get('password').hasError('required')">密码是必填项。</div>
      <div *ngIf="myForm.get('password').hasError('minlength')">密码长度至少为6个字符。</div>
    </div>
  </div>

  <button type="submit" [disabled]="!myForm.valid">提交</button>
</form>