@gabrielmedeiros2/json-auto-forms

Json Auto Forms

Json Auto Forms is a library to quickly build forms from json objects.

Installing

$ npm install --save json-auto-forms

Quickstart

Import json-auto-forms module

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
      AutoFormLibModule,
  ]
  ...
})
...

Usage

On your component, set the json object corresponding to the form you want to be generated and create a function to receive the submitted form.

import {FormLayout} from "./form-layout.model";

@Component({
  selector: 'my-feature',
  templateUrl: './my-feature.component.html',
  styleUrls: ['./my-feature.component.css'],
  standalone: true
})
export class MyFeatureComponent {
  myForm: FormLayout = {
    id: 1,
    fields: [
      {
        name: 'Text Field',
        type: FormFieldType.TEXT_INPUT,
        fieldWidth: '100%',
        order: 1,
        useMatError: true,
        validators: [
          {
            name: FormFieldValidatorEnum.REQUIRED
          }
        ]
      },
      {
        name: 'Number Field',
        type: FormFieldType.NUMBER_INPUT,
        fieldWidth: '49%',
        order: 2,
        useMatError: true
      },
      {
        name: 'Date Field',
        type: FormFieldType.DATE_INPUT,
        fieldWidth: '49%',
        order: 3,
        useMatError: true
      },
    ]
  }

  public mySubmittedValues(form: FormGroup): void {
    console.log(form.getRawValue());
  }
}

In the HTML, insert the library tag making references to the previous steps configurations

<auto-form [formLayout]="myForm" (submitForm)="mySubmittedValues($event)"></auto-form>

For form array usage:

TS

export class MyFeatureComponent {
  myAddFormEventEmmiter: EventEmmiter<any> = new EventEmmiter<any>();
  /* Your code here */
}

HTML

<button click="myAddFormEventEmmiter.emit()">Add Form</button>
<auto-form-array [formLayout]="myForm" [addItem]="myAddFormEventEmmiter" (submitForm)="mySubmittedValues($event)"></auto-form-array>

Form options

Input types

  FormFieldType.TEXT_INPUT;
  FormFieldType.FILE_INPUT;
  FormFieldType.NUMBER_INPUT;
  FormFieldType.DATE_INPUT;
  FormFieldType.DATE_TIME_INPUT;
  FormFieldType.RADIO_INPUT;
  FormFieldType.PASSWORD_INPUT;
  FormFieldType.TEXT_AREA;
  FormFieldType.SELECTBOX;
  FormFieldType.CHECKBOX;

Validator types

  FormFieldValidatorEnum.REQUIRED;
  FormFieldValidatorEnum.EMAIL;
  FormFieldValidatorEnum.MAX_LENGTH;
  FormFieldValidatorEnum.MIN_LENGTH;
  FormFieldValidatorEnum.FUNCTION;

Custom Validators

On this version, now it's possible to create your own custom validators. To archieve that, use the new validator type "function".

import {AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms";

// Create your custom validator
const myCustomValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
    if(control.value === 'invalid') {
        const error = {customValidator: true};
        control.setErrors(error);
        return error;
    }
    
    return null;
}

const form = {
  /* Form configurations */
  fields: [
    {
      name: 'Text Field',
      type: FormFieldType.TEXT_INPUT,
      fieldWidth: '100%',
      order: 1,
      useMatError: true,
      validators: [
        {
          name: FormFieldValidatorEnum.FUNCTION,
          function: myCustomValidator
        }
      ]
    },
    /* Other fields */
  ]
}

Custom validator messages

TS

export class MyFeatureComponent {
  public myCustomValidatorMessages: ValidationText = {
    required: 'Field is required',
    email: 'Field must be an email',
    minLength: 'Field must contain at least x characters',
    maxLength: 'Field must not contain more than x characters',
    function: 'Field validation failed'
  };
  /* Your component code here */
}

HTML

<auto-form [formLayout]="myForm" [validationTextList]="myCustomValidatorMessages" (submitForm)="mySubmittedValues($event)"></auto-form>

Custom submit button styles

CSS

.myCustomStyle {
  backgroud-color: blue;
  color: white;
  border-radius: 12px;
}

TS

export class MyFeatureComponent {
  myCustomStyleString: string = 'myCustomStyle';
...
}

HTML

<auto-form [formLayout]="myForm" [submitStyles]="myCustomStyleString" (submitForm)="mySubmittedValues($event)"></auto-form>

Add more action buttons

HTML

<auto-form [formLayout]="myForm" [submitStyles]="myCustomStyleString" (submitForm)="mySubmittedValues($event)">
  <button type="button" (click)="goBack()">Go back to previous page</button>
</auto-form>