DNext Angular Validator Library¶

A comprehensive validation library for Angular applications providing custom validators and validation services.

Installation¶

npm install @dnext-angular/validator

Setup¶

Import the validator service in your Angular module:

import { NgModule } from '@angular/core';
import { Validator } from '@dnext-angular/validator';

@NgModule({
  providers: [
    Validator
  ]
})
export class AppModule { }

Available Validators¶

1. Email Format Validator¶

Validates email addresses against standard format using RFC 5322 standards.

import { emailFormatValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  emailFormatValidator
]);
// Returns error { 'invalidEmail': true } if invalid

What it checks: - Proper email format ([email protected]) - Valid domain structure - Allowed special characters - Maximum length constraints

Error returned: { 'invalidEmail': true }

2. IP Format Validator¶

Validates IPv4 addresses ensuring proper formatting and range values.

import { ipFormatValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  ipFormatValidator
]);
// Returns error { 'invalidIp': true } if invalid

What it checks: - Four number segments - Each segment between 0-255 - Proper dot notation - No leading zeros

Error returned: { 'invalidIp': true }

3. Phone Number Validator¶

Validates international phone numbers following E.164 format.

import { phoneNumberValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  phoneNumberValidator
]);
// Returns error { 'invalidPhone': true } if invalid

What it checks: - Country code presence - Valid number length - Numeric values - Optional formatting characters (+, -, spaces)

Error returned: { 'invalidPhone': true }

4. Only Numbers Validator¶

Ensures input contains only numeric values without any other characters.

import { onlyNumbersShouldBeValidValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  onlyNumbersShouldBeValidValidator
]);
// Returns error { 'invalidNumber': true } if invalid

What it checks: - Only digits (0-9) - No special characters - No alphabetic characters - No spaces

Error returned: { 'invalidNumber': true }

5. No Leading/Trailing Spaces Validator¶

Prevents whitespace at the start or end of input while allowing spaces between words.

import { noLeadingTrailingSpacesValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  noLeadingTrailingSpacesValidator()
]);
// Returns error { 'noLeadingTrailingSpaces': true } if invalid

What it checks: - No spaces at start - No spaces at end - Allows internal spaces - Trims value comparison

Error returned: { 'noLeadingTrailingSpaces': true }

6. No Spaces Allowed Validator¶

Prevents any whitespace characters in the input.

import { noSpacesAllowedValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  noSpacesAllowedValidator()
]);
// Returns error { 'noSpacesAllowed': true } if invalid

What it checks: - No spaces anywhere - No tabs - No line breaks - No whitespace characters

Error returned: { 'noSpacesAllowed': true }

7. Non-Negative Integer Validator¶

Ensures input is a positive whole number or zero.

import { nonNegativeIntegerValidator } from '@dnext-angular/validator';

const control = new FormControl('', [
  nonNegativeIntegerValidator
]);
// Returns error { 'nonNegativeInteger': true } if invalid

What it checks: - Only whole numbers - No negative values - No decimals - No special characters

Error returned: { 'nonNegativeInteger': true }

Implementation Examples¶

1. Basic Form Validation¶

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { 
  emailFormatValidator,
  phoneNumberValidator,
  ipFormatValidator 
} from '@dnext-angular/validator';

@Component({
  selector: 'app-user-form',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <div>
        <label>Email:</label>
        <input formControlName="email" type="email">
        <div *ngIf="userForm.get('email')?.errors?.['invalidEmail']">
          Please enter a valid email address
        </div>
      </div>

      <div>
        <label>Phone:</label>
        <input formControlName="phone" type="tel">
        <div *ngIf="userForm.get('phone')?.errors?.['invalidPhone']">
          Please enter a valid phone number
        </div>
      </div>

      <div>
        <label>IP Address:</label>
        <input formControlName="ipAddress">
        <div *ngIf="userForm.get('ipAddress')?.errors?.['invalidIp']">
          Please enter a valid IP address
        </div>
      </div>

      <button type="submit" [disabled]="!userForm.valid">Submit</button>
    </form>
  `
})
export class UserFormComponent {
  userForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.userForm = this.fb.group({
      email: ['', [Validators.required, emailFormatValidator]],
      phone: ['', [phoneNumberValidator]],
      ipAddress: ['', [ipFormatValidator]]
    });
  }

  onSubmit() {
    if (this.userForm.valid) {
      console.log(this.userForm.value);
    }
  }
}

2. Using Validator Service¶

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Validator } from '@dnext-angular/validator';

@Component({
  selector: 'app-service-form',
  template: `
    <form [formGroup]="serviceForm" (ngSubmit)="onSubmit()">
      <div>
        <label>Username:</label>
        <input formControlName="username">
        <div *ngIf="serviceForm.get('username')?.errors?.['noSpacesAllowed']">
          Spaces are not allowed in username
        </div>
      </div>

      <div>
        <label>Description:</label>
        <input formControlName="description">
        <div *ngIf="serviceForm.get('description')?.errors?.['noLeadingTrailingSpaces']">
          Remove leading or trailing spaces
        </div>
      </div>

      <button type="submit" [disabled]="!serviceForm.valid">Submit</button>
    </form>
  `
})
export class ServiceFormComponent {
  serviceForm: FormGroup;

  constructor(
    private fb: FormBuilder,
    private validator: Validator
  ) {
    this.serviceForm = this.fb.group({
      username: ['', [this.validator.noSpacesAllowedValidator()]],
      description: ['', [this.validator.noLeadingTrailingSpacesValidator()]]
    });
  }

  onSubmit() {
    if (this.serviceForm.valid) {
      console.log(this.serviceForm.value);
    }
  }
}

3. Custom Error Messages Component¶

import { Component, Input } from '@angular/core';
import { AbstractControl } from '@angular/forms';

@Component({
  selector: 'app-validation-errors',
  template: `
    <div class="error-messages" *ngIf="control?.errors && control?.touched">
      <div *ngIf="control?.errors?.['invalidEmail']">
        Please enter a valid email address
      </div>
      <div *ngIf="control?.errors?.['invalidPhone']">
        Please enter a valid phone number
      </div>
      <div *ngIf="control?.errors?.['invalidIp']">
        Please enter a valid IP address
      </div>
      <div *ngIf="control?.errors?.['noSpacesAllowed']">
        Spaces are not allowed
      </div>
      <div *ngIf="control?.errors?.['nonNegativeInteger']">
        Please enter a non-negative integer
      </div>
    </div>
  `
})
export class ValidationErrorsComponent {
  @Input() control: AbstractControl | null = null;
}

Dependencies¶

@angular/core: >=18.0.1
@angular/common: >=18.0.1

License¶

DNext PiAGroup

Validator Methods Explained¶