Implementing Custom Validators for Number Range Validation in Angular 2 Final

Angular 2 Form Validation Overview

Angular 2's form validation system provides robust data validation mechanisms, but in the final version, built-in validators primarily focus on string validation. According to official documentation, supported validators include: required, minlength, maxlength, pattern, requiredTrue, nullValidator, compose, and composeAsync. While these validators meet most string input validation needs, they exhibit significant limitations when handling numerical inputs.

Limitations of Built-in Validators

In template-driven forms, developers might attempt to use HTML5's min attribute to restrict the minimum value of number inputs, but Angular 2 does not automatically convert these attributes into effective form validation. Consider the following code example:

@Component({
  selector: 'my-app',
  template: `
  <form #formRef="ngForm">
    <input type="number" [(ngModel)]="firstValue" name="firstValue" min="0" required/>
    <input type="text" [(ngModel)]="secondValue" maxlength="5" name="secondValue" required/>
    <button type="submit"> Submit </button> 
  </form>
  
  FORM: {{formRef.form | json }}
`
})
export class AppComponent { 
  firstValue = -22;
  secondValue = "eyy macarena!"; 
}

In this example, although the min="0" attribute exists on the input element, Angular's validation system ignores it, allowing the form to pass validation even when containing invalid negative values. This limitation highlights the necessity of creating custom validators.

Implementation of Custom Number Validator

To address the need for number range validation, we can create a flexible custom validator. Below is a fully functional number validator implementation:

import { FormControl, ValidatorFn, Validators } from '@angular/forms';

function isPresent(obj: any): boolean {
  return obj !== undefined && obj !== null;
}

export class CustomValidators {
  static number(prms: { min?: number, max?: number } = {}): ValidatorFn {
    return (control: FormControl): { [key: string]: any } | null => {
      // First check required validation
      if (isPresent(Validators.required(control))) {
        return null;
      }
      
      const val: number = control.value;

      // Check if it's a valid number
      if (isNaN(val) || /\D/.test(val.toString())) {
        return { "number": true };
      }
      
      // Check min and max range
      const { min, max } = prms;
      
      if (!isNaN(min) && !isNaN(max)) {
        // Validate both min and max
        return val < min || val > max ? { "number": true } : null;
      } else if (!isNaN(min)) {
        // Validate only min
        return val < min ? { &quot;number&quot;: true } : null;
      } else if (!isNaN(max)) {
        // Validate only max
        return val > max ? { "number": true } : null;
      } else {
        // No range restrictions, only validate if it's a number
        return null;
      }
    };
  }
}

Validator Usage Scenarios

This custom validator offers multiple usage patterns that can be configured according to specific requirements:

// Basic number validation
const basicNumberControl = new FormControl("", [Validators.required, CustomValidators.number()]);

// With minimum value validation
const minNumberControl = new FormControl("", CustomValidators.number({ min: 0 }));

// With maximum value validation  
const maxNumberControl = new FormControl("", CustomValidators.number({ max: 20 }));

// Range validation [0-20]
const rangeNumberControl = new FormControl("", CustomValidators.number({ min: 0, max: 20 }));

Validator Design Principles Analysis

The design of this custom validator follows several important principles:

Type Safety: Leverages TypeScript's type system to ensure correct parameter and return types, reducing runtime errors.

Flexibility: Supports multiple configuration options, allowing validation of minimum values, maximum values, or both ranges simultaneously.

Error Handling: Returns uniform error object formats when validation fails, facilitating consistent error state handling in templates.

Compatibility: Fully compatible with Angular's built-in validation system and can be combined with other validators.

Comparison with Alternative Solutions

Beyond custom validators, several other approaches exist for number range validation:

Third-party Libraries: Libraries like ng2-validation provide ready-made range validation directives, used as follows:

<input type="number" [(ngModel)]="someNumber" name="someNumber" #field="ngModel" [range]="[10, 20]"/>
<p *ngIf="someNumber.errors?.range">Must be in range</p>

Custom Directives: Creating directive-based validators by implementing the Validator interface, which is more suitable for template-driven forms.

In comparison, the custom validator approach presented in this article offers better type safety and flexibility, particularly excelling in reactive forms.

Best Practice Recommendations

When applying number range validation in real-world projects, consider following these best practices:

Error Message Internationalization: Provide localized error messages for different validation failures to enhance user experience.

Performance Optimization: For frequently changing numerical inputs, consider implementing debounce mechanisms to reduce validation frequency.

Test Coverage: Write comprehensive unit tests for custom validators to ensure correctness under various boundary conditions.

Accessibility: Ensure validation errors are properly recognized by assistive technologies like screen readers.

Conclusion

While Angular 2's form validation system is powerful, it has limitations in handling number range validation. By creating custom validators, developers can flexibly implement various numerical validation requirements. The validator implementation provided in this article not only addresses basic number range validation issues but also demonstrates sound software design principles, offering strong support for building robust Angular applications.