Adding Validation to InputNumber in Angular

Background:

Some developers want to validate values entered in the Wijmo InputNumber control and visually indicate when the value is invalid. For example, a user may need to enter any number except zero, and the control should display a red left border if the value is invalid. This can be achieved using Angular’s data binding, event handling, and conditional CSS styling.

Steps to Complete:

1. Set up valueChanged event handler
2. Use [ngClass] to apply dynamic styling using a custom CSS class
3. Avoid assigning null to the control, use NaN for blank initial state

Getting Started:

To validate an InputNumber so that 0 (or no value) triggers a red left border:

Use [ngClass] and a validation method in your component

<wj-input-number
  [(ngModel)]="value"
  (valueChanged)="validateInput()"
  [ngClass]="{'invalid-input': isInvalid}"
  [min]="minValue"
  [max]="maxValue"
  [step]="stepValue"
></wj-input-number>

<div *ngIf="isInvalid" style="color: red;">Value cannot be zero.</div>

In your component class, implement the validation logic:

value: number = NaN; // avoids Wijmo assertion errors
isInvalid = false;
minValue = -1e10;
maxValue = 1e10;
stepValue = 1;

validateInput(): void {
  this.isInvalid = this.value === 0 || isNaN(this.value);
}

Add CSS for the invalid border:

.invalid-input {
  border-left: 4px solid red !important;
}

This solution will apply a red border if the input is empty or 0, but the logic can be tweaked to meet your applications validation requirements. The valueChanged event ensures validation is triggered whenever the value changes, and ngClass makes it easy to toggle styling dynamically to inform your user if their input is invalid.

Hope you found this article helpful. Happy coding!