Angular 5 - 反应形式

Posted 2023-03-13

【中文标题】Angular 5 - 反应形式

【英文标题】：Angular 5 - Reactive Forms

【发布时间】：2019-09-11 19:33:18

【问题描述】：

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

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

【问题讨论】：

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

【参考方案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 ??