Angular form验证，在HTML上迭代时访问表单控件

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

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

  constructor() {
    this.myForm = new FormGroup({
      name: new FormControl(''),
      email: new FormControl(''),
      password: new FormControl('')
    });
  }
}

<form [formGroup]="myForm">
  <div *ngFor="let control of myForm.controls | keyvalue">
    <label>{{ control.key }}</label>
    <input [formControlName]="control.key" [type]="getInputType(control.key)">
    <div *ngIf="myForm.get(control.key).invalid && myForm.get(control.key).touched">
      <div *ngIf="myForm.get(control.key).errors.required">This field is required.</div>
      <div *ngIf="myForm.get(control.key).errors.email">Invalid email format.</div>
      <!-- 其他验证错误消息 -->
    </div>
  </div>
</form>

getInputType(key: string): string {
  if (key === 'password') {
    return 'password';
  } else if (key === 'email') {
    return 'email';
  } else {
    return 'text';
  }
}