@dr-angular/form-material v12.2.1

A very useful tool for view dynamic forms using angular material. It just needs a json as input.

Install the library and import the "FormMaterialModule" module

// ...

import { FormMaterialModule } from '@dr-angular/form-material';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    FormMaterialModule
  ]
})
export class AppModule { }

Construct the jsonHero object using the IDynamicForm interface:

@Input() jsonForm: IDynamicForm;
@Output() formSubmit: EventEmitter<any>;

formSubmitted: any = {};

// ...

jsonHero: IDynamicForm = {
  name: 'form_1',
  title: 'My example form',
  buttonResetName: 'Reset the form',
  buttonSubmitName: 'Save the form',
  buttonNextName: 'Next page',
  buttonPrevName: 'Prev page',
  buttonNextAlwaysEnabled: false,
  pages: [
    {
      name: 'page_1',
      title: 'Page 1',
      sections: [
        {
          name: 'section_chk',
          title: 'Prova',
          rows: [
            {
              cells: [
                {
                  type: 'CHECKBOX',
                  controlName: 'hide_section',
                  label: 'Hide section',
                }
              ]
            }
          ]
        },
        {
          name: 'hidden_if',
          title: 'Section to hide',
          hidden: 'hide_section === true',
          rows: [
            {
              cells: [
                {
                  type: 'TEXT',
                  controlName: 'text_required',
                  label: 'Text 1',
                  validators: [
                    {
                      type: 'REQUIRED'
                    }
                  ]
                }
              ]
            }
          ],
        }
      ]
    },
    {
      name: 'page_2',
      title: 'Page 2',
      sections: [
        {
          name: 'section_1',
          rows: [
            {
              cells: [
                {
                  type: 'CHECKBOX',
                  controlName: 'ctrlCheckbox',
                  label: 'Show message bo',
                  defaultValue: true
                },
                {
                  type: 'TEXTAREA',
                  cellSize: 5,
                  controlName: 'ctrlMessage',
                  label: 'Message Box',
                  hidden: [
                    'ctrlCheckbox === false'
                  ],
                  validators: [
                    {
                      type: 'REQUIRED'
                    }
                  ]
                }
              ]
            }
          ]
        }
      ]
    }
  ]
};

An example of how to use the component

<div *ngIf="jsonHero">
    <dr-form-material [jsonForm]="jsonHero" (formSubmit)="formSubmitted=$event">
    </dr-form-material>
</div>

{{formSubmitted | json}}

To build the form consult the pack @dr-angular/form-material-builder.

npm i @dr-angular/form-material-builder