【问题标题】: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 运算符来获取 previouscurrent 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 ??

【讨论】:

    猜你喜欢
    • 2018-10-10
    • 1970-01-01
    • 2018-11-30
    • 1970-01-01
    • 2018-07-15
    • 1970-01-01
    • 2019-02-18
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多