Проблема связана с использованием элементов управления угловой формы, рефакторингом из 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: "",
}
0
Ricardo Saracino 13 Сен 2018 в 22:37

2 ответа

Лучший ответ

Не могли бы вы попробовать,

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

1
Uladzislau Vavilau 13 Сен 2018 в 20:10

Для реактивных форм

/**
 * 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>

Тогда ваши данные поступят в ваш компонент в той форме, в которой вы хотите.

Здесь вы можете поиграть с живым примером. create-event.component имеет расположение ngModelGroup.

1
Arek Kostrzeba 13 Сен 2018 в 22:32