使用valueChanges监听嵌套FormGroup下的任何字段更改

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

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

  constructor() {
    this.nestedForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      address: new FormGroup({
        street: new FormControl(''),
        city: new FormControl(''),
        state: new FormControl('')
      })
    });
  }
}

<form [formGroup]="nestedForm">
  <label>
    First Name:
    <input type="text" formControlName="firstName">
  </label>
  <label>
    Last Name:
    <input type="text" formControlName="lastName">
  </label>
  <div formGroupName="address">
    <label>
      Street:
      <input type="text" formControlName="street">
    </label>
    <label>
      City:
      <input type="text" formControlName="city">
    </label>
    <label>
      State:
      <input type="text" formControlName="state">
    </label>
  </div>
</form>

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

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html',
  styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
  nestedForm: FormGroup;

  constructor() {
    this.nestedForm = new FormGroup({
      firstName: new FormControl(''),
      lastName: new FormControl(''),
      address: new FormGroup({
        street: new FormControl(''),
        city: new FormControl(''),
        state: new FormControl('')
      })
    });
  }

  ngOnInit() {
    this.nestedForm.valueChanges.subscribe(value => {
      console.log(value);
      // 在这里可以处理表单字段的更改
    });
  }
}