@piq9117/ng2-form-validator

ng2-form-validator

To install:

npm install --save @piq9117/ng2-form-validator

Then import formValidator:

import { formGroupValidator, formControlValidator } from '@piq9117/ng2-form-validator'

Example Use Case:

import { Component, OnInit } from '@angular/core'
import { Observable } from 'rxjs/Observable'
import { Subscription } from 'rxjs/Subscription'
import { FormGroup, FormControl, FormBuilder, Validators,  } from '@angular/forms'
import { formGroupValidator, formControlValidator } from '@piq9117/ng2-form-validator'
import 'rxjs/add/observable/merge'

@Component({
  selector: 'form-validation',
  templateUrl: 'form.component.html'
})
export class FormValidationComponent implements OnInit {
  public form: FormGroup
  public minValue: FormControl
  public inputError: any
  public subscription: Subscription

  public formError: any
  public validationMsg: any

  constructor (
    private fb: FormBuilder
  ) {
    this.formError = {
      firstName: '',
      lastName: '',
      number: ''
    }

    this.inputError = {
      minValue: ''
    }

    this.validationMsg = {
      firstName: {
        maxlength: 'length must be less than 5',
        required: 'this input is required'
      },
      lastName: {
        maxlength: 'length must be less then 5',
        required: 'this input is required'
      },
      number: {
        pattern: 'must be number'
      },
      minValue: {
        maxlength: 'length must be less than 4'
      }
    }
  }

  ngOnInit ()  {
    const { maxLength, required, pattern, compose } = Validators
    const validators = compose([maxLength(5), required])
    this.form = this.fb.group({
      firstName: ['', validators],
      lastName: ['', validators],
      number: ['', pattern('[0-9]+')]
    })

    this.minValue = new FormControl('', maxLength(4))

    const data = {
      form: this.form,
      formError: this.formError,
      validationMsg: this.validationMsg
    }

    const inputData = {
      form: this.minValue,
      formError: this.inputError,
      validationMsg: this.validationMsg
    }

    const forms$ = Observable.merge(
      this.minValue.valueChanges,
      this.form.valueChanges
      )

    this.subscription = forms$
      .subscribe(_ => {
        formGroupValidator(data)
        formControlValidator(inputData)
      })
  }
}

The template:

<div>
  <label>
    <h4>Minimum value</h4>
    <input type="text" [formControl]="minValue">
    <p>{{inputError.minValue ? inputError.minValue : ''}}</p>
  </label> 
  
  <h4>Form Group</h4>
  <form [formGroup]="form">
    <div>
      <label>First Name</label>
      <input type="text" formControlName="firstName">
      <label>{{formError.firstName ? formError.firstName : ''}}</label>
    </div>
    <div>
      <label>Last Name</label>
      <input type="text" formControlName="lastName">
      <label>{{formError.lastName ? formError.lastName : ''}}</label>
    </div>
    <div>
      <label>Some Number</label>
      <input type="text" formControlName="number">
      <label>{{formError.number ? formError.number : ''}}</label>
    </div>
  </form>
</div>