针对多个组件的单个FormGroup，应一次查看一个组件

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

@Component({
  selector: 'app-form',
  template: `
    <form [formGroup]="myForm">
      <input formControlName="name" placeholder="Name">
      <input formControlName="email" placeholder="Email">
      <input formControlName="phone" placeholder="Phone">
    </form>
    <button (click)="viewComponent()">View Component</button>
  `
})
export class FormComponent {
  myForm: FormGroup;

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

  viewComponent() {
    for (const controlName in this.myForm.controls) {
      if (this.myForm.controls.hasOwnProperty(controlName)) {
        const control = this.myForm.controls[controlName];
        console.log(`Component: ${controlName}`);
        console.log(`Value: ${control.value}`);
        console.log(`Valid: ${control.valid}`);
        console.log(`Touched: ${control.touched}`);
        console.log(`Errors: ${JSON.stringify(control.errors)}`);
      }
    }
  }
}