ngx-form-validation

angular 2 and beyond json powered form validation library

• Exposes a provider that receives an uri( that return a json form) and returns a complete validated FormGroup
• Exposes a provider that receives a json form and returns a complete validated formGroup

Installation

Install ngx-form-validation from npm:

npm install ngx-form-validation --save

Setup

Set up in your project like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import {FormValidationModule} from "ngx-form-validation";
import {ReactiveFormsModule} from "@angular/forms";
import {HttpClientModule} from "@angular/common/http";


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ReactiveFormsModule,
    BrowserModule,
    FormValidationModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• ReactiveFormsModule and HttpClientModule are mandatory

Then you import FormValidationService in your component

import {FormValidationService} from "ngx-form-validation/lib/service/form-validation.service";
.
.
.
constructor(private formValidationService: FormValidationService) {}

The following APIs are provided :

Function | Usage --- | --- toFormGroup| Gets the form validation object as a param and returns a complete instance of FormGroup createForm| Gets the form object from the endpoint (specified by the provided uri) and generates acomplete FormGroup getValidationObject | Gets the form object from the endpoint (specified by the provided uri)

Here's an example of json powered form

 let form: any = [
    {
      key: "firstName", value: "khaled", "type": "textarea", validations: {
      required: true,
      minLength: "7",
      maxLength: "8",
      pattern: "",
      custom: "",
      email:false
    }
    },
    {
      key: "psw", value: "", "type": "password", validations: {
      required: true,
      minLength: "7",
      maxLength: "15",
      pattern: "",
      custom: "",
      email:false
    }
    }
  ];

##Here you can find a fully working example