Angular 5 - Reactive Forms

问题

I am working on the reactive forms and I am not able to get the specifically the form control which has changed or updated from UI rather getting the whole form . I tried using valueChanges() but it returns the full form itself rather than giving me the specific changed form control .

I tried using the valueChanges() method but no getting what i am expecting

回答1:

You can subscribe to specific form control rather than the entier form lie this way

this.form.get('userName').valueChanges(value=> console.log('name change',value))

you can manage subscribe to form controls dynamically like this

this.form = fb.group({
  name: [],
  age: [],
  address: [],
});

Object.keys(this.form.controls).forEach(key  => {
  this.form.get(key).valueChanges.subscribe(value =>{
    console.log(`control ${key} has change =>` ,value)
  })
});

stackblitz demo 🚀🚀

回答2:

you can still use form valueChanges pipe with pairwise operator to get the previous and current value and by compare both values you can get the the controls that changes

constructor(private fb: FormBuilder) {
    this.form = fb.group({
      name: [],
      age: [],
      address: [],
    });

    this.form.valueChanges.
       pipe(debounceTime(2000) ,startWith(null), pairwise()).  
       subscribe(([prev, next]) => {
        if (prev === null) { // 👈 run only first time 
          console.log(this.getValue(next))
        } else { // 🚨 compare values
          const result = {};
          const keys = Object.keys(next);

          keys.forEach(key => {
            if (prev[key] !== next[key]) {
              result[key] = next[key]
            }
          });
          console.log(result) ; // 🔵 the value that has changed 
        }
      })
  }

  // 👇👇 
  // for the first time all form controls are null 
  // so this mwthos get the value of object taht has a value 
  getValue(obj) {
    return Object.keys(obj).reduce((prev: any, key) => {
      if (obj[key]) {
        prev[key] = obj[key];
      };
      return prev;
    }, {})
  } 

stackblitz demo 🔥🔥

来源：https://stackoverflow.com/questions/55797253/angular-5-reactive-forms