Material Components For Dynamic Form

MatSelectModule import in AppModule!

This is a set of wrappers for Material input components for Dynamic Form library. Angular v11+ and Material For Angular v11+ is required. Provided input types are:

• string
• number
• email
• tel
• url
• password
• select
• multiselect
• text
• checkbox
• radio
• _description_

Installation

Install the library through NPM:

$ npm i @elemental-concept/ngx-dynamic-form-material

Add MatSelectModule import and provider DYNAMIC_FORM_COMPONENT_MAP to your AppModule, then add DynamicFormMaterialModule to your page modules.

// app.module.ts
import { NgModule } from '@angular/core';
import { MatSelectModule } from '@angular/material/select';
import { DYNAMIC_FORM_COMPONENT_MAP } from '@elemental-concept/ngx-dynamic-form';
import { materialComponentMap } from '@elemental-concept/ngx-dynamic-form-material';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    MatSelectModule
  ],
  providers: [
    { provide: DYNAMIC_FORM_COMPONENT_MAP, useValue: materialComponentMap }
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}

// form-page.module.ts
import { NgxDynamicFormModule } from '@elemental-concept/ngx-dynamic-form';
import { NgxDynamicFormMaterialModule } from '@elemental-concept/ngx-dynamic-form-material';

@NgModule({
  imports: [
    NgxDynamicFormModule,
    NgxDynamicFormMaterialModule
  ]
})
class FormPageModule {
}

Available Meta Options

These options are based on Material library options, please refer to Material documentation for more details.

interface MaterialInputMeta {
  appearance?: MatFormFieldAppearance;
  floatLabel?: FloatLabelType;
  hintLabel?: string;
  labelPosition?: 'after' | 'before';
  cssClass?: string;
  color?: ThemePalette;
  suffix?: SuffixMeta;
  htmlDescription?: string;
  hideRequiredMarker?: boolean;
}

interface SuffixMeta {
  type: SuffixType;
}

enum SuffixType {
  label = 'label',
  password = 'password'
}