您是否尝试在调试会话中单步执行您的代码(例如,使用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 再次查看控制组。这些调用的结果被收集,放入一个对象并在我们完成时返回。
- 如果是控件:我们可以收集值并返回它。