Angular Form Validation

ng-form-validation makes your validation handling process easy by providing you with the required validation for particular field which takes a lot of stress from your shoulder.

Installation

Install the package through the CLI

  npm install ng-form-validations

Import function in your component.ts file

  import { ngValidator } from 'ng-form-validations';

You would need to import Reactive forms module in your module.ts file

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [ReactiveFormsModule],
})
class AppModule {}

Boilerplate for usage

The formErrors will look something like this

  formErrors = {
    name: '',
    email: ''
  }

The formErrorMessages will go the following way

formErrorMessages = {
  name: {
    required: 'Name is required',
    minLength: 'Name must be of atleat 5 characters'
  },
  email: {
    required: 'Email is required'
  }
}

Finally, the FormGroup definition which will apply the validfations will be

constructor(private fb: FormBuilder){}

  ngOnInit(): void {
    this.formGroup = this.fb.group({
      name: ['', [Validators.required, Validators.minLength(5)]],
      email: ['', Validators.required]
    });
    this.formGroup.valueChanges.subscribe((data) => {
      this.formErrors = ngValidator(this.formGroup, this.formErrors, this.formErrorMessages)
    })
  }

The last part is using the formErrors in your HTML file to show the error messaged

<form [formGroup]="formGroup">
  <input type="text" formControlName="name">
  <span *ngIf="formError.name">{{formError.name}}</span>
  <input type="email" formControlName="email">
  <span *ngIf="formError.email">{{formError.email}}</span>
</form>

To make sure you are able to use the package to the most and error free, try to follow the available interfaces, which are

interface IFormError {
    [key: string]: string;
}
interface IFormErrorMessages {
    [key: string]: {
        [key: string]: string;
    };
}

These will help you to always be accurate with the type used and returned so that you don't keep scratching your head when facing some error.

🔗 Links