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

```bash
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;
Inputdisabled?: boolean; // Whether the field is required
buttonList?: Array;
buttonStyle?: string;
NgClass?: string;
InputType?: string;
ButtonText?: string;
showhide?: boolean;
autofill?: Array;
checkboxlabel?: Array;
HideShowInput?: Array;
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;
Inputdisabled?: boolean; // Whether the field is required
buttonList?: Array;
buttonStyle?: string;
NgClass?: string;
InputType?: string;
ButtonText?: string;
showhide?: boolean;
autofill?: Array;
checkboxlabel?: Array;
HideShowInput?: Array;
errorMessage?: string;
ParentStyle?: string;
GroupLabel?: Array;
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

```

Live Demo

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