json-reactive-material-form-angular-18 Example

This project demonstrates how to implement modal popups in an Angular application using the json-reactive-material-form-angular-18 package.

Table of Contents

• Installation
• Setup
• Usage
• Component Example
• Complete Code Structure
• Live Demo
• License

Installation

To install the json-reactive-material-form-angular-18 package, run the following command: npm i json-reactive-material-form-angular-18@latest

usage

interface FieldRules {
  required?: boolean; // Whether the field is required
}

interface formArrayTypeConfig {
  type?: 'text' | 'number' | 'date' | 'email' | 'password' | 'checkbox' | 'radio' | 'SelectOption' | 'textarea' | 'datetime-local'; // represents the type, e.g., "PaymentTermType"
  value?: any; // general placeholder for value, could be more specific based on usage
  label?: string; // label text to display
  name?: string; // unique identifier or name for the field
  callback?: (item: any) => void; // optional callback function 
  rules: FieldRules; // Validation rules for the field
  minLength?: number; // Minimum length for the input value
  maxLength?: number; // Maximum length for the input value
  pattern?: string; // Regex pattern to validate the input
  customValidator?: (value: string) => boolean; // Function for custom validation
  placeholderText?: string; // Placeholder text for the field
  items?: Array<any>;
  Inputdisabled?: boolean; // Whether the field is required
  buttonList?: Array<any>;
  buttonStyle?: string;
  NgClass?: string;
  InputType?: string;
  ButtonText?: string;
  showhide?: boolean;
  autofill?: Array<any>;
  checkboxlabel?: Array<any>;
  HideShowInput?: Array<any>;
  errorMessage?: string;
  ParentStyle?: string;
  disabled?: boolean;
}

interface FieldConfig {
  type: 'text' | 'number' | 'date' | 'email' | 'password' | 'checkbox' | 'radio' | 'SelectOption' | 'textarea' | 'datetime-local' | 'formGroup';// Type of input field, e.g., "text", "number"
  value: any; // The default value of the field
  label: string; // The label for the field
  rules: FieldRules; // Validation rules for the field
  minLength?: number; // Minimum length for the input value
  maxLength?: number; // Maximum length for the input value
  pattern?: string; // Regex pattern to validate the input
  customValidator?: (value: string) => boolean; // Function for custom validation
  placeholderText?: string; // Placeholder text for the field
  items?: Array<any>;
  Inputdisabled?: boolean; // Whether the field is required
  buttonList?: Array<any>;
  buttonStyle?: string;
  NgClass?: string;
  InputType?: string;
  ButtonText?: string;
  showhide?: boolean;
  autofill?: Array<any>;
  checkboxlabel?: Array<any>;
  HideShowInput?: Array<any>;
  errorMessage?: string;
  ParentStyle?: string;
  GroupLabel?: Array<any>;
  AddNewRequried?: boolean;
  formArray?: formArrayTypeConfig[];
}

import { Component } from '@angular/core';
import { ReactiveJsonFormsService,JsonReactiveFormModule } from 'json-reactive-material-form-angular-18';

@Component({
  standalone:true,
  imports:[JsonReactiveFormModule],
  providers:[ReactiveJsonFormsService],
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  title = 'angular-tour-of-heroes';
  constructor(public form_service: ReactiveJsonFormsService) { }

  OpenPopUp() {
      this.form_service.buildForm({
        name: {
          type: "text",
          value: "",
          label: "your label name",
          rules: {
            required: true,
          },
          placeholderText:"",
          maxLength:6
        },
        lastname: {
          type: "text",
          value: "",
          label: "your last name",
          rules: {
            required: true,
          },
          placeholderText:"",
          maxLength:6
        },
          address: {
            type: 'formGroup',
            value: '',
            label: 'Address',
            GroupLabel: ['Address list'],
            AddNewRequried: true,
            rules: {
              required: false,
            },
            formArray: [
              {
                type: 'text',
                value: '',
                label: 'Your Last Name',
                name: 'lastname',
                rules: {
                  required: true,
                },
                placeholderText: '',
              },
            ],
          },
      }, "newform").then((res: any) => {
    });
  }

  onSubmit(form) {
    console.log(form, 'onSubmit');
 }
}
# app.component.html add
<Json-Reactive-Forms id="newform" [CancelRoute]="'/home'" (OnSubmitEvent)="onSubmit($event)"></Json-Reactive-Forms>

Live Demo

You can view and run the example project live on StackBlitz: link