Как добавить классы CSS в JSON приведенный в действие

Question

Я использую angular formly с angular 7, а angular formly работает на JSON, поэтому проблема заключается в установке полей в строке с помощью классов начальной загрузки.

Я попытался проанализировать JSON и добавил классы начальной загрузки в сам угловой код (машинописный текст), но все же столкнулся с той же проблемой. Все поля не идут подряд. Пример: получение 13 полей, и я хочу, чтобы 3 поля были подряд с классом "col-sm-4". должно быть несколько вкладок, которые я генерировал динамически.

<nb-tabset (changeTab)= "changeTab($event)" *ngIf='!!configData'>
    <nb-tab *ngFor="let list of configData; let i = index;" [active]="i===0" class="pt-5" tabTitle={{list.friendlyName}}>
        <div class="formly security col-12 col-sm-10 mx-sm-5 px-sm-5">
            <form (ngSubmit)="submit()" [formGroup]="form">
                <formly-form [fields]="list.form.fields" [form]="list.form.formlyForm" [model]="list.form.formlyModel" [options]="options">
                </formly-form>
                <button class="btn-demo btn-primary float-right" nbButton type="submit">Save</button>
            </form>
        </div>
    </nb-tab>

Ответ Json (означает, что configData имеет ответ ниже)

{
    "data": [{
            "id": 2,
            "name": "Application Form",
            "friendlyName": "Application form",
            "description": "Leasing Application Configuration",
            "form": {
                "actionUrl": "https:\/test/1",
                "method": "post",
                "fields": [{
                        "type": "nb-input",
                        "key": "applicantMinAge",
                        "defaultValue": "18",
                        "templateOptions": {
                            "label": "Applicant Age (Min.)",
                            "placeholder": "Enter Applicant Age (Min.)",
                            "required": true
                        }
                    },
                    {
                        "type": "nb-input",
                        "key": "allowedDaysToUnArchive",
                        "defaultValue": "30",
                        "templateOptions": {
                            "label": "Allowed Days To Unarchive",
                            "placeholder": "Enter Allowed Days To Unarchive",
                            "required": true
                        }
                    }
                ]
            }
        },
        {
            "id": 3,
            "name": "Screening",
            "friendlyName": "Screening",
            "description": "Leasing Screening Configuration",
            "form": {
                "actionUrl": "https:\/\test/1",
                "method": "post",
                "fields": [{
                    "type": "nb-input",
                    "key": "screeningExpiryInDays",
                    "defaultValue": "90",
                    "templateOptions": {
                        "label": "Screening Expire (In Days)",
                        "placeholder": "Enter Screening Expire (In Days)",
                        "required": true
                    }
                }]
            }
        },

    ]
}