how to add css to ngx-formly input fields

Question

Being new to ngx-formly, I'm struggling to add custom CSS to fields, labels, and inputs. Are there any methods that work well for achieving this? I'd appreciate any guidance on how to easily style these elements.help me to resolve that.

Answer 1

    import { Common Module } from '@angular/common';
    import { Component } from '@angular/core';
    import { FormGroup, ReactiveFormsModule, Validators } from 
   '@angular/forms';
    import { FormlyBootstrapModule } from '@ngx-formly/bootstrap';
    import { FormlyFormOptions, Formly Module } from '@ngx-formly/core';
    import { Formly Field Config } from '@ngx-formly/core';
    
    @Component({
      selector: 'app-contact',
      standalone: true,
      imports: [
        CommonModule,
        ReactiveFormsModule,
        FormlyBootstrapModule,
        FormlyModule,
      ],
      templateUrl: './contact.component.html',
      styleUrl: './contact.component.css',
    })
    export class ContactComponent {
      form = new FormGroup({});
      model = {};
      options: FormlyFormOptions = {};
      fields: FormlyFieldConfig[] = [
        {
          key: 'email',
          type: 'input',
          className: 'form-group custom-group',
          templateOptions: {
            attributes: {
              class: 'form-control custom-control',
            },
            label: 'Email',
            type: 'email',
            placeholder: 'Enter your Email',
            required: true,
          },
          validators: {
            validation: [Validators.email],
          },
          validation: {
            messages: {
              required: 'Email is required',
              email: 'Invalid email address',
            },
          },
        },
    
        {
          key: 'subject',
          type: 'input',
          template Options: {
            attributes: {
              style: '',
              class: 'form-control  custom-class',
            },
            label: 'Subject',
            placeholder: 'Enter your Subject',
            required: true,
          },
        },
        {
          key: 'message',
          type: 'textarea',
          templateOptions: {
            attributes: {
              style: 'min-height:100px;',
            },
            label: 'Message',
            placeholder: 'Enter Your Message ',
            required: true,
          },
        },
      ];
    
      on Submit() {
        if (this. form .valid) {
          console.log(this. model);
        }
      }
    }