Json Auto Forms

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

Installing

1$ npm install --save json-auto-forms

Quickstart

Import json-auto-forms module

1@NgModule({
2  declarations: [
3    ...
4  ],
5  imports: [
6    ...
7      AutoFormLibModule,
8  ]
9  ...
10})
11...

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.

1import {FormLayout} from "./form-layout.model";
2
3@Component({
4  selector: 'my-feature',
5  templateUrl: './my-feature.component.html',
6  styleUrls: ['./my-feature.component.css'],
7  standalone: true
8})
9export class MyFeatureComponent {
10  myForm: FormLayout = {
11    id: 1,
12    fields: [
13      {
14        name: 'Text Field',
15        type: FormFieldType.TEXT_INPUT,
16        fieldWidth: '100%',
17        order: 1,
18        useMatError: true,
19        validators: [
20          {
21            name: FormFieldValidatorEnum.REQUIRED
22          }
23        ]
24      },
25      {
26        name: 'Number Field',
27        type: FormFieldType.NUMBER_INPUT,
28        fieldWidth: '49%',
29        order: 2,
30        useMatError: true
31      },
32      {
33        name: 'Date Field',
34        type: FormFieldType.DATE_INPUT,
35        fieldWidth: '49%',
36        order: 3,
37        useMatError: true
38      },
39    ]
40  }
41
42  public mySubmittedValues(form: FormGroup): void {
43    console.log(form.getRawValue());
44  }
45}

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

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

For form array usage:

TS

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

HTML

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

Form options

Input types

1  FormFieldType.TEXT_INPUT;
2  FormFieldType.FILE_INPUT;
3  FormFieldType.NUMBER_INPUT;
4  FormFieldType.DATE_INPUT;
5  FormFieldType.DATE_TIME_INPUT;
6  FormFieldType.RADIO_INPUT;
7  FormFieldType.PASSWORD_INPUT;
8  FormFieldType.TEXT_AREA;
9  FormFieldType.SELECTBOX;
10  FormFieldType.CHECKBOX;

Validator types

1  FormFieldValidatorEnum.REQUIRED;
2  FormFieldValidatorEnum.EMAIL;
3  FormFieldValidatorEnum.MAX_LENGTH;
4  FormFieldValidatorEnum.MIN_LENGTH;
5  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".

1import {AbstractControl, ValidationErrors, ValidatorFn} from "@angular/forms";
2
3// Create your custom validator
4const myCustomValidator: ValidatorFn = (control: AbstractControl): ValidationErrors | null => {
5    if(control.value === 'invalid') {
6        const error = {customValidator: true};
7        control.setErrors(error);
8        return error;
9    }
10    
11    return null;
12}
13
14const form = {
15  /* Form configurations */
16  fields: [
17    {
18      name: 'Text Field',
19      type: FormFieldType.TEXT_INPUT,
20      fieldWidth: '100%',
21      order: 1,
22      useMatError: true,
23      validators: [
24        {
25          name: FormFieldValidatorEnum.FUNCTION,
26          function: myCustomValidator
27        }
28      ]
29    },
30    /* Other fields */
31  ]
32}

Custom validator messages

TS

1export class MyFeatureComponent {
2  public myCustomValidatorMessages: ValidationText = {
3    required: 'Field is required',
4    email: 'Field must be an email',
5    minLength: 'Field must contain at least x characters',
6    maxLength: 'Field must not contain more than x characters',
7    function: 'Field validation failed'
8  };
9  /* Your component code here */
10}

HTML

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

Custom submit button styles

CSS

1.myCustomStyle {
2  backgroud-color: blue;
3  color: white;
4  border-radius: 12px;
5}

TS

1export class MyFeatureComponent {
2  myCustomStyleString: string = 'myCustomStyle';
3...
4}

HTML

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

Add more action buttons

HTML

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