#Use a two column layout for Formly forms

4 messages · Page 1 of 1 (latest)

wheat swift
#

I need to to use a two column layout for a form made with angular-formly but applying styles to the form seems to be useless. By inspecting the DOM I see that formly creates additional elements so it becomes quite hard to write css to layout form elements. I came across to the formGroupClassName to add styles to a form group but it does not work.
This is the template

<mat-expansion-panel>
  <mat-expansion-panel-header>CRM</mat-expansion-panel-header>
  <form [formGroup]="form">
    <formly-form [form]="form" [fields]="fields" [model]="model"></formly-form>
  </form>
</mat-expansion-panel>

This is the logic:

import {Component} from '@angular/core';
import {FormGroup, ReactiveFormsModule} from "@angular/forms";
import {FormlyFieldConfig, FormlyModule} from "@ngx-formly/core";
import {FormlyMaterialModule} from "@ngx-formly/material";
import {MatExpansionModule} from "@angular/material/expansion";

@Component({
  selector: 'eg-crm',
  standalone: true,
  imports: [
    FormlyModule,
    FormlyMaterialModule,
    ReactiveFormsModule,
    MatExpansionModule
  ],
  templateUrl: './crm.component.html',
  styleUrls: ['./crm.component.css']
})
export class CRMComponent {
  form = new FormGroup({});
  model = {};
  fields: FormlyFieldConfig[] = [{
    fieldGroupClassName: 'grid-2',
    fieldGroup: [
      {
        key: 'crm',
        type:'select',
        props: {
          label: 'CRM',
          options: [], //TODO: add options here via API Call
        }
      },
      {
        key: 'crmConsideration',
        type:'select',
        props: {
          label: 'CRM Consideration',
          options: [], //TODO: add options here via API Call
        }
      },
      {
        key: 'numberOfUsers',
        type:'number',
        props: {
          label: 'Number of Users',
        }
      },
    ]
  }];

}
wheat swift
#

It seems like Formly can only use classes available in styles.css

analog tiger
#

What I did is created two forms, one for each column.

vestal fern
#

@wheat swift try adding encapsulation : ViewEncapsulation.None
to your component decorator.After that try styling it through css/scss by grabbing the classes for the block you want to style