angularngx-formly

ngx formly repeated field with chips as array of string input angular


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?


Solution

  • 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
        },
      }
    }