json-reactive-form-angular-14 Example

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

Table of Contents

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

Installation

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

setup

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { JsonReactiveFormModule } from 'json-reactive-form-angular-14';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    JsonReactiveFormModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule { }

usage

import { Component } from '@angular/core';
import { ReactiveJsonFormsService } from 'json-reactive-form-angular-14';

@Component({
  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
        }
      }, "newform").then((res: any) => {
    });
  }

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

Live Demo

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