Question

问题源于使用从ngModel重构的角度形式控件

this.form.addControl('Contact.Attributes.firstname', new FormControl('', Validators.required));

NgModel重构

[(ngModel)]="object.Contact.Attributes.firstname">

因此，我有一个“扁平”对象，需要将其转换为嵌套值的标准化对象。.是否有一种聪明的方法来执行此操作而无需编写自己的解析器？

将其转换为（this.form.value）

{
 Contact.Attributes.firstname: "", 
 Contact.Attributes.middlename: "", 
 Contact.Attributes.lastname: ""
}

进入

Contact: {
  Attributes: {
    firstname: "",
    middlename: "",
    lastname: "",
}

Answer 1

可以请您尝试

const unflatten = require('flat').unflatten;

unflatten({
    'three.levels.deep': 42,
    'three.levels': {
        nested: true
    }
})

结果：

// {
//     three: {
//         levels: {
//             deep: 42,
//             nested: true
//         }
//     }
// }

https://github.com/hughsk/flat

Answer 2

对于活动表单

/**
 * Add a control to this group.
 *
 * This method also updates the value and validity of the control.
 *
 * @param name The control name to add to the collection
 * @param control Provides the control for the given name
 */
addControl(name: string, control: AbstractControl): void;

这意味着您可以将FormControl或FormGroup对象传递给addControl方法，因为这两个对象都是AbstractControl的实例。而且，即使您的this.form也是FormGroup的实例

/** Component */
this.form.addControl('Contact', new FormGroup({
    Attributes: new FormGroup({
      firstName: new FormControl('', Validators.required),
      lastName: new FormControl('', Validators.required)
    })
}));

/** Template bindings */
<form [formGroup]="form">
   <div [formGroup]="form.controls.Contact.controls.Attributes">
    <input formControlName="firstName" id="firstName" type="text" class="form-control" />
    <input formControlName="lastName" id="lastName" type="text" class="form-control" />
  </div>
</form>

对于基于模板的表单

使用ngModelGroup指令包装您的输入

<div ngModelGroup="Contact" >
  <div ngModelGroup="Attributes" >
    <input [(ngModel)]="object.firstname" name="firstname" id="firstname" class="form-control"/>
  </div>
</div>

然后，您的数据将以您想要的形式到达您的组件。

Here，您可以进行现场表演。 create-event.component具有ngModelGroup位置。

使用Angular FormControlls时将JavaScript对象从平面对象标准化到嵌套对象

2 个答案:

对于活动表单

对于基于模板的表单