在Angular

时间:2017-11-09 10:06:55

标签: angular angular-forms

考虑以下情况:

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

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

代码:

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看不到变化,即使地址是它的子组。

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

提前致谢!

0 个答案:

没有答案