Angular 5 - 反应形式

Question

我正在处理反应式表单，但我无法获得从 UI 更改或更新的具体表单控件，而是获得整个表单。我尝试使用 valueChanges() 但它 returns 完整的表单本身而不是给我特定的更改表单控件。

我尝试使用 valueChanges() 方法，但没有得到我期望的结果

Answer 1

您可以订阅特定的表单控件，而不是这样的整个表单

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

您可以像这样动态管理订阅表单控件

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

Answer 2

您仍然可以使用带有 pairwise 运算符的形式 valueChanges 管道来获取 previous 和 current value通过比较这两个值，您可以获得更改的控件

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

Angular 5 - 反应形式

Angular 5 - Reactive Forms

typescript

angular

angular-reactive-forms

angular5