How to watch on few fields changes in long form in Angular 2

Question

My form has 10 to 15 fields I just want to watch the changes on 2 fields built using form-builder.

Currently i can watch all the fields in the form using the following code :

  export class App {
  constructor(private formBuilder: FormBuilder) {
    this.form = formBuilder.group({
      firstName: 'John',
      lastName: 'Fleming',
      Name: 'John Fleming',
      Address : '12331 wiley post',
      city: '',
      state:'',
      ...... so on    
    })

    this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      this.output = data
    })
  }
}

I don't want to watch all the fields, I used (keyup) event on those fields to handle it for now. But I want to know whether there is any better way of doing the same in angular2?

Chiou

Answer 1

I can't try this right now to confirm the syntax ... but something like this:

import { merge } from 'rxjs';    
merge(
      this.form.get('firstName').valueChanges,
      this.form.get('lastName').valueChanges
    )
     .subscribe(data => console.log(data));

Hydrophobic

NOTE: Edited Feb 8, 2021 to bring to current RXJS syntax. – Hydrophobic

Answer 2

you can use this to check on form fields per field

this.form.get('firstName').valueChanges.subscribe(data => console.log(data)); 

Discriminative

Thanks Rahul, Is there any way to watch multiple fields like firstname and lastname at a time? – Chiou

@Chiou i guess you got your answer by deborah , she is merging the two observables and getting the result , but there is no one way syntax from angular – Discriminative