Angular 2 - 在 Observable 中获取更改的 FormControl 的值

Question

我有一个用 FormBuilder 构建的简单表单:

this.contactForm = formBuilder.group({
  'name': [''],
  'email': [''],
  'phone': [''],
});

我想观察每个控件的更改，并在发生这种情况时使用更新后的值运行一个函数:

getContacts(value: any) {
    this.phoneContacts.findContact(value).then(
        contacts => {
            // do something
        }
    );
}

现在，我正在为每个控件执行此操作，使用 bind访问 this组件对象:

this.contactForm.get('name').valueChanges.subscribe(this.getContacts.bind(this));
this.contactForm.get('email').valueChanges.subscribe(this.getContacts.bind(this));
this.contactForm.get('phone').valueChanges.subscribe(this.getContacts.bind(this));

有没有什么方法可以通过一次订阅来观察变化并获得更新的值？我知道我可以直接订阅 this.contact.form ，但随后我将所有控件作为值而不是更新的控件。

Answer 1

您可以使用合并运算符将 3 个单独的 observable 合并为一个。这将为您提供一个单一的 observable，只要表单字段值中的任何一个发生变化，它就会发出单一的值。

this.contactForm.get('name').valueChanges
    .merge(this.contactForm.get('email').valueChanges)
    .merge(this.contactForm.get('phone').valueChanges)

上述方法的主要问题是您现在不知道哪个值与哪个表单控件对应。一种解决方案是将值更改映射到包含值和控件(即值的源)的另一个对象

// making some local variables for convenience
let name = this.contactForm.get('name')
let email = this.contactForm.get('email'
let phone = this.contactForm.get('phone')

name.valueChanges.map(v => ({control: name,value: v})
    .merge(email.valueChanges.map(v => ({control: email, value: v}))
    .merge(phone.valueChanges.map(v => ({control: phone, value: v}))  

这将给出一个可在任何字段更改时发出的 observable，并且它发出的值将是一个包含该值和发出该值的控件的对象。