【问题标题】:Get only the Changed data from angular2 forms仅从 angular2 表单中获取已更改的数据
【发布时间】:2016-06-04 04:57:07
【问题描述】:

嗨。我有一个基本的 angular2 表单,其中我有嵌套对象。我想做的是我只想得到那些脏的字段。我面临着获取深度嵌套对象的值的问题.. .这是我的演示http://plnkr.co/edit/gzT4mVWglHrFziRayHtK?p=preview,这里在联系人字段中所做的更改正在主对象中...

{
"addressinfo": {
"Line1": "",
"Line2": ""
},
"firstname": "",
"lastname": "",
"Contacts": {
"Phone1": {
  "Type": "",
  "Number": ""
}
}
}

如果我更改数字字段并提交表单,那么我将以这种方式获取响应对象...

{
"Contacts": {},
"Phone1": {
  "Number": ""
}
}

由于 Number 字段已更改,我希望以这种方式输出

{
"Contacts": {
     "Phone1": {
        "Number": ""
     }
   },
}

有人帮我只获取正确对象格式的更改数据...谢谢

【问题讨论】:

  • 你检查好了没有。我可以在myForm 中找到Number,Type
  • 到目前为止,您所做的一切都很好。控件也有其他属性。所以我认为你的 plunker 只是好。

标签: javascript typescript angular


【解决方案1】:

您是否尝试在调试会话中单步执行您的代码(例如,使用debugger 语句)?当它检查您的Contacts 控制组时,它会将此名称作为新对象推送到ResultObject 并再次开始执行recursivelyIterateProperties(jsonObject,ResultObject,activeProperty),并使用以下参数:

jsonObject = {Phone1: ControlGroup},
ResultObject = {Contacts: {}},
activeProperty = 'Contacts'

问题是Phone1 又是一个控制组,因此您的=== 'object' 代码再次执行,将一个新的Phone1 对象直接推送到ResultObject。换句话说,您的代码不能很好地处理嵌套控制组。

我冒昧地将您的代码稍微改写成一个工作示例:Plunker

为清楚起见,初始控制组的迭代已从值集合中分离出来。我们首先遍历所有控件:

iterateOverControls(controls, resultObject): any {
  var resultObject = {};
  // Iterate over controls and controlgroups
  for ( var control in controls ) {
    var result = {}
    // Only look into dirty controls
    if ( controls.hasOwnProperty(control) && !controls[control].pristine ) {
      result[control] = this.retrieveValuesForControl(controls[control]);
      // Once we have collected the changes, add them to the result object
      for ( var key in result ) {
        if ( result.hasOwnProperty(key) ) {
          resultObject[key] = result[key];
        }
      }
    }
  }

  return resultObject;
}

对于我们遇到的每个控件,我们尝试通过调用retrieveValuesForControl 来收集其值。此方法需要我们当前正在研究的控件作为参数。

retrieveValuesForControl(control): any {
  // Only check dirty objects
  if ( control.pristine ) {
    return;
  }

  var values;
  if ( typeof(control.value) === 'object' && control.controls ) {
    // The current control is a control group, so we need to look deeper
    values = {};
    for ( var item in control.controls ) {
      // We retrieve values for this control again (recursively)
      values[item] = this.retrieveValuesForControl(control.controls[item]);
    }
  } else if ( !control.pristine) {
    // We have a control, so copy the value
    values = control.value;
  }

  // Return our collected values (either a plain value or object of values)
  return values;
}

在这个方法中,我们首先检查我们正在查看的控件是否是脏的。如果它是原始的,我们直接返回。接下来我们检查我们是在看一个控制组还是一个控制组。

  • 如果是控制组:我们希望通过为控制组包含的每个控制调用iterateOverControls 再次查看控制组。这些调用的结果被收集,放入一个对象并在我们完成时返回。
  • 如果是控件:我们可以收集值并返回它。

【讨论】:

    【解决方案2】:

    我觉得您无法正确找到它们。

    console.log(this.myForm.controls.Contacts.controls.Phone1.controls);
    

    这是查找数字和类型的确切方法。我没有看到你的 plunker 有任何问题。

    【讨论】:

    • 对象中对象的迭代工作正常,它可以完美地识别更改的字段,但是当我尝试获取响应更改的字段时,输出应该以这种格式显示{ "Contacts": { "Phone1": { "Number": "" } }, }为此我尝试,不知道如何以这种方式获得响应
    【解决方案3】:

    你也可以订阅

    this.myForm.valueChanges.subscribe(...)

    并以这种方式收集更改的值。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-12-28
      相关资源
      最近更新 更多