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 合并为一个。这将为您提供一个单独的可观察对象，只要任何一个表单字段值发生更改，它就会发出单个值。

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，只要任何字段发生变化，它就会发出，并且它发出的值将是一个包含该值和发出该值的控件的对象。

Answer 2

您可以对单个控件使用 valueChanges 并订阅它：

 this.contactForm.controls['name'].valueChanges.subscribe((value) => {
  console.log(" name : " + value)
})

Answer 3

您可以从表单中获取所有可观察的控件 valueChanges 并合并所有流：

const observablesArray = this.contactFrom.controls.map((control) => control.valueChanges);

Observable.merge(...observablesArray).do(console.log).subscribe();

现在，当字段更改时，您会收到一个值，而不是包含所有字段的对象。

Answer 4

ngOnInit() {
    this.contactForm.valueChanges.subscribe(value => {
      console.log(value.name)  
    });
}

或

您可以像这样定位单个控件，

this.contactForm.controls.name.valueChanges.subscribe(value => {
     console.log(value);
});