在Angular

Question

考虑以下情况：

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

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

代码：

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个可观察项会触发新值，前一个this.debit.valueChanges看不到变化，即使地址是它的子组。

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

提前致谢！