Angular14 JSON FORM

Generate angular reactive form from JSON with tons of dynamic properties and custom event handler

Documentation

Installing angular14-json-form npm i angular14-json-form

Adding in your component.ts file

  title = 'libraryValidator';
  fields:any = [
    {
      name: 'name',
      type: 'text',
      label: 'Name',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: 'John Doe',
      minLength: 3,
      minMessage: 'Name must be at least 3 characters long',
      maxLength: 20,
      maxMessage: 'Name must be at most 20 characters long',
      pattern: '^[a-zA-Z ]+$',
      patternMessage: 'Name can only contain alphabets',
      validations: {},
      validationMessages: {},
      placeholder: 'Enter Name',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:''
    },
    {
      name: 'email',
      type: 'text',
      label: 'Email',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: '[email protected]',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: 'Enter Email',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:''
    },
    {
      name: 'password',
      type: 'password',
      label: 'Password',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: '[email protected]',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: 'Enter Email',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:''
    },
    {
      name: 'married',
      type: 'checkbox',
      label: 'Married',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: 'yes',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: '',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:'',
      options:[
        {
          label:'Married',
          value:true
        },
        {
          label:'Unmarried',
          value:false
        }
      ]
    },
    {
      name: 'gender',
      type: 'radio',
      label: 'Gender',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: 'male',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: '',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:'',
      options:[
        {
          label:'Male',
          value:'male'
        },
        {
          label:'Female',
          value:'female'
        }
      ]
    },
    {
      name: 'ageGroup',
      type: 'select',
      label: 'Age Group',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: '0-10',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: '',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:'',
      options:[
        {
          label:'0-10',
          value:'0-10'
        },
        {
          label:'10-20',
          value:'10-20'
        }
      ]
    },
    {
      name: 'bio',
      type: 'textarea',
      label: 'Bio',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: 'I am xyz, I have done this ...',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: '',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:''
    },
    {
      name: 'date',
      type: 'date',
      label: 'Date',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: '03-02-2023',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: '',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:''
    },
    {
      name: 'submit',
      type: 'submit',
      label: '',
      required: true,
      disabled: false,
      readonly: false,
      isVisible: true,
      defaultValue: '03-02-2023',
      minLength: null,
      minMessage: '',
      maxLength: null,
      maxMessage: '',
      pattern: null,
      patternMessage: '',
      validations: {},
      validationMessages: {},
      placeholder: '',
      size:'',
      autofocus:'',
      filedWidth:null,
      customClass:''
    }
  ]

  submitHandler(from:FormGroup){
    console.log(from, 'in app component')
  }
  fieldChangeHandler(val:any){
    console.log(val, 'field updated')
  }

Adding in your component.html file

 <angular14-json-form
         [title]="'Smart Form'"
         [subTitle]="'Form is build by using JSON'"
         [fields]="fields"
         [itemPerRow]="1"
         (submitHandler)="submitHandler($event)"
         (fieldChangeHandler)="fieldChangeHandler($event)"
 >
 </angular14-json-form>