Search code examples
javascriptangularngx-formly

Is there an option to NOT use a theme in formly?


I want to use tailwind to do all my styling and don't want to add extra libraries to my code.

Here is a simple example of what I've come up with:

https://stackblitz.com/edit/angular-ivy-uxrxrc?file=src%2Fapp%2Fformly-component%2Fformly-component.ts

What I've done:
Created a simple component with formly inside of it with a basic input field. Angular seems to compile fine, but the formly doesn't seem to display any fields. It errors out with a Error: [Formly Error] There is no type by the name of "input".

I also can't seem to find any examples in the documentation that doesn't have a theme.


Solution

  • Formly provide a set of themes out of the box such material, bootstrap.. but that not prevent you to create your own theme, the only required is step is to define custom field type as documented in https://formly.dev/guide/custom-formly-field to summarize here are the steps:

    1. Create a custom field type with name input:
    import { Component } from '@angular/core';
    import { FieldType } from '@ngx-formly/core';
    
    @Component({
     selector: 'formly-datetimepicker',
     template: `
       <input [formControl]="formControl"></input>
     `,
    })
    export class InputFieldType extends FieldType {}
    
    1. define your field type through the NgModule declaration:
    @NgModule({
     declarations: [InputFieldType],
     imports: [
       ....
       FormlyModule.forRoot({
         types: [
           { name: 'input', component: InputFieldType },
         ],
       }),
     ],
    })
    export class AppModule {}
    
    1. set type to type in your field config:
    fields = [
      {
        key: 'name',
        type: 'input',
      },
    ]
    

    still confused check Formly UI source code https://github.com/ngx-formly/ngx-formly/tree/master/src/ui