Angular 5 - 反应形式答案

【问题标题】：Angular 5 - Reactive FormsAngular 5 - 反应形式
【发布时间】：2019-09-11 19:33:18
【问题描述】：

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

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

【问题讨论】：

你检查了答案，它们有效吗？对你来说，如果你能提供任何反馈，那就太好了？？？？？？

标签： angular typescript angular5 angular-reactive-forms

【解决方案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 ??

【讨论】：

您好 Malbarmawi，谢谢您的回复。我知道我们必须遍历键并检查表单控件是否已更改。但我一直在寻找任何特定的反应式表单方法，它只能在有一些变化时提供更改的控制，而不是循环和检查每个表单控件。再次感谢您的回答

【解决方案2】：

您仍然可以使用表单valueChanges 管道和pairwise 运算符来获取 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 ??

【讨论】：