javascript – 只获取angular2表单中的Changed数据

2019年7月21日 163次阅读

Hie.I有一个基本的angular2形式,我有嵌套的对象.我想要做的是我只想得到那些脏的字段.我面临问题,得到深层嵌套对象的值…这是我的演示
http://plnkr.co/edit/gzT4mVWglHrFziRayHtK?p=preview,这里在联系人字段中完成的更改将在主对象中进行…

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

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

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

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

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

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

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

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

问题是Phone1再次成为一个控制组,因此你的===’对象’代码再次执行,将一个新的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;
}

在这种方法中,我们首先检查我们正在查看的控件是否脏.如果它是原始的,我们直接返回.接下来,我们检查我们是否正在查看对照组或对照组.

>如果是控制组：我们希望通过为控制组包含的每个控件调用iterateOverControl来再次查看控件组.收集这些调用的结果,将其放入一个对象中,并在完成后返回.
>如果是控件：我们可以收集价值并将其返回.

点赞