I have json object like this
{ num_info : [["a","b"],["c","d"]] }
and using ngx-formly i want to show this on the form.
So I have created 2 custom components repeat
and chips
From here i got the chips code. And here is the repeat section
import { Component } from "@angular/core";
import { FieldArrayType } from "@ngx-formly/core";
@Component({
selector: "formly-repeat-section",
templateUrl: "./formly-repeat-section.component.html"
})
export class FormlyRepeatSectionComponent extends FieldArrayType { }
html part
<div *ngFor="let field of field.fieldGroup; let i = index;" class="row" style="border: 1px solid gray;padding: 5px;margin-top: 5px;">
<formly-field class="col" [field]="field"></formly-field>
<div class="col-sm-2 d-flex align-items-center">
<button class="btn btn-danger" type="button" (click)="remove(i)">Remove</button>
</div>
</div>
<div style="margin:30px 0;">
<button class="btn btn-primary" type="button" (click)="add()">{{to.addText}}</button>
</div>
and this is how I am defining field
{
key: "num_info",
type: "repeat",
templateOptions: {
addText: "Add New",
},
className: "newclass",
fieldArray: {
fieldGroupClassName: "group0-class-name",
fieldGroup: [
{
className: "col-sm-4 myclass", type: "chips", key: "num_info",
templateOptions: {
label: "num_info", required: true
},
}]
,
}
}
but this is not working though this repeat section works if the input is of type
{ myfield : [ {name : "sunny" }] }
any help on this please?
Do not use fieldGroup
on that case also the key num_info
is not needed as well:
{
key: "num_info",
type: "repeat",
templateOptions: { addText: "Add New" },
className: "newclass",
fieldArray: {
type: "chips",
templateOptions: {
label: "num_info",
required: true
},
}
}