Prevent nullable input in NumericTextBox in Angular NumericTextBox component

26 Feb 20262 minutes to read

By default, the NumericTextBox value can be set to null. To ensure the NumericTextBox always contains a value, use the following approach to prevent nullable input.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs'



import{Component, ViewChild}from'@angular/core';
import { NumericTextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
         NumericTextBoxModule
    ],


standalone: true,
    selector:'app-root',
    // specifies the template string for the NumericTextBox component
    template:`
      <ejs-numerictextbox #numeric=""  id="numeric" placeholder= 'NumericTextBox' floatLabelType= 'Always' (created)="onCreate($event)"  (blur)="onBlur($event)" ></ejs-numerictextbox>
      `
})
  export class AppComponent {
   @ViewChild('numeric') public numeric?: NumericTextBoxComponent | any;
   public onCreate(args: any) {
    if (this.numeric.value == null) {
      this.numeric.value = 0;
    }
   }
   public onBlur(args: any) {
     if(args.value == null) {
      this.numeric.element.value = 0;
     }
   }
   constructor() {
   }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));