Creating Angular Forms Using JSON

In Angular, forms are essential for capturing user input and performing data validation. While Angular provides powerful form-building capabilities, you can simplify the form setup process by using JSON (JavaScript Object Notation) to define your form fields and their properties in a concise and declarative manner. In this blog post, we’ll explore how to create an Angular form using JSON and demonstrate its usage with a sample code example.

JSON Structure

To get started, let’s define the structure of our JSON object. Each form field will be represented by an object with the following properties:

• name: The name of the form field.
• label: The label or display name for the form field.
• type: The input type of the form field (e.g., text, email, password, etc.).
• validation: The validation rules or constraints for the form field.

Sample Code Example

Let’s consider an example where we want to create a registration form with the following fields: First Name, Last Name, Email, and Password. We’ll define these fields using JSON in the Angular component.

form.component.ts

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './form.component.html',
  styleUrls: ['./form.component.css'],
})
export class FormComponent {
  formGroup!: FormGroup;
  formFields: any[] = [
    {
      name: 'firstName',
      label: 'First Name',
      type: 'text',
      validation: 'required',
    },
    {
      name: 'lastName',
      label: 'Last Name',
      type: 'text',
      validation: 'required',
    },
    {
      name: 'email',
      label: 'Email',
      type: 'email',
      validation: 'required,email',
    },
    {
      name: 'password',
      label: 'Password',
      type: 'password',
      validation: 'required,minlength:6',
    },
  ];

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    const formGroupConfig: Record<string, any> = {};

    for (const field of this.formFields) {
      const validators = this.getValidators(field.validation);
      formGroupConfig[field.name] = ['', validators];
    }

    this.formGroup = this.formBuilder.group(formGroupConfig);
  }

  getValidators(validationString: string) {
    const validators = [];
    const validationArray = validationString.split(',');

    for (const validation of validationArray) {
      if (validation === 'required') {
        validators.push(Validators.required);
      } else if (validation.startsWith('minlength')) {
        const minLength = Number(validation.split(':')[1]);
        validators.push(Validators.minLength(minLength));
      } else if (validation === 'email') {
        validators.push(Validators.email);
      }
     
    }

    return validators;
  }

  isFieldInvalid(fieldName: string) {
    const control = this.formGroup.get(fieldName);
    return control && control.invalid && (control.dirty || control.touched);
  }

  getValidationErrors(fieldName: string) {
    const control = this.formGroup.get(fieldName);
    const errors = [];

    if (control) {
      for (const errorKey in control.errors) {
        if (control.errors.hasOwnProperty(errorKey)) {
          errors.push(this.getErrorMessage(errorKey, control.errors[errorKey]));
        }
      }
    }

    return errors;
  }

  getErrorMessage(errorKey: string, errorValue: any) {
    switch (errorKey) {
      case 'required':
        return 'This field is required';
      case 'minlength':
        return `Minimum length is ${errorValue.requiredLength}`;
      case 'email':
        return 'Invalid email address';
      // Add more custom error messages as needed
      default:
        return `Validation error: ${errorKey}`;
    }
  }

  onSubmit() {
    if (this.formGroup.valid) {
      console.log(this.form.value);
    }
  }
}

form.component.html

<form [formGroup]="formGroup" (ngSubmit)="onSubmit()">
  <div *ngFor="let field of formFields">
    <label>{{ field.label }}</label>
    <input [type]="field.type" [formControlName]="field.name">
    <div *ngIf="formGroup.get(field.name).invalid && formGroup.get(field.name).touched">
      <span *ngIf="formGroup.get(field.name).errors?.required">Field is required.</span>
      <span *ngIf="formGroup.get(field.name).errors?.email">Invalid email address.</span>
      <span *ngIf="formGroup.get(field.name).errors?.minlength">Minimum length is 6 characters.</span>
    </div>
  </div>
  <button type="submit" [disabled]="formGroup.invalid">Submit</button>
</form>

Conclusion

Using JSON to define Angular forms provides a concise and declarative approach to form creation. It allows you to specify your form fields and their properties in a straightforward manner, reducing boilerplate code. This approach promotes code reusability and maintainability.

In this blog post, we explored how to create an Angular form using JSON and provided a sample code example to illustrate the concept. By leveraging JSON for form configuration, you can easily manage and customize your forms with ease.

Remember to adjust the code and template to fit your specific requirements.

Demo