Angular formly fieldGroup should the object but it is returning the array as value.
as per formly field config, inventories property in model object should be in object but it is giving array.
package.json
"@ngx-formly/bootstrap": "^6.1.2",
"@ngx-formly/core": "^6.1.2",
app.component.html
<form [formGroup]="form" (ngSubmit)="submit()">
<formly-form
[model]="model"
[fields]="fields"
[options]="options"
[form]="form"
></formly-form>
<button type="submit" class="btn btn-primary submit-button">Submit</button>
<button type="button" class="btn btn-default" (click)="options.resetModel()">
Reset
</button>
</form>
<p>{{ model | json }}</p>
<!-- Copyright 2021 Formly. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at https://github.com/ngx-formly/ngx-formly/blob/main/LICENSE -->
app.component.ts
import { Component } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { FormlyFormOptions, FormlyFieldConfig } from '@ngx-formly/core';
@Component({
selector: 'formly-app-example',
templateUrl: './app.component.html',
})
export class AppComponent {
form = new FormGroup({});
model: any = {};
options: FormlyFormOptions = {
formState: {
awesomeIsForced: false,
},
};
fields: FormlyFieldConfig[] = [
{
key: 'inventories',
fieldGroup: [
{
key: '3',
type: 'input',
props: {
label: 'Text',
placeholder: 'Formly field 3',
required: true,
},
},
{
key: '4',
type: 'input',
props: {
label: 'Text',
placeholder: 'Formly field 3',
required: true,
},
},
],
},
];
submit() {
if (this.form.valid) {
alert(JSON.stringify(this.model));
}
}
}
below is OutPut of model from above code ( looks like error)
{ "inventories": [ null, null, null, "22", "33" ] }
Expected output for form model.
{
"inventories": {"3": "22", "4": "33" }
}
Some minor adjustments are required:
>> See Stackblitz Example Online