请考虑以下情形：

有两个表单组(“地址”和“客户”)，每个表单组有一个表单控件(文本字段)。它们被重复使用并组合成两个其他形式组(“借记”和“信用”)。

动机是我可能想要为不同的表单组合不同的表单组(例如，某些组需要地址组而另一些不需要)，或者为不同的表单组引入不同的验证器。

码：

app.component.html：

<div class="container">

    <form [formGroup]="customer">
        <div class="form-group">
            <label>E-mail</label>
            <input class="form-control" type="text" formControlName="email">
        </div>
    </form>

    <form [formGroup]="address">
        <div class="form-group">
            <label>Street</label>
            <input class="form-control" type="text" formControlName="street">
        </div>
    </form>

</div>

app.component.ts：

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

@Component({
  selector: "app-form",
  templateUrl: "app.component.html",
})
export class AppComponent {

  address = new FormGroup({
    street: new FormControl(),
  });

  customer = new FormGroup({
    email: new FormControl(),
  });

  debit = new FormGroup({
    customer: this.customer,
    address: this.address,
  });

  credit = new FormGroup({
    customer: this.customer,
    address: this.address,
  });

  ngOnInit() {

    // this will not fire on change
    this.debit.valueChanges.subscribe(console.log);

    // this will fire on change
    this.credit.valueChanges.subscribe(console.log);
  }

}

问题是每当我在子组中执行更改(比如在街道字段中键入内容)时，只有最后一个this.credit.valueChanges observable 触发一个新值，前者this.debit.valueChanges看不到更改，即使地址是它的子组。

所以我想问一下这种行为的原因是什么，如果需要这种行为，我该如何实现我的用例呢？

提前致谢！

angular angular-forms