Prevent nullable input in numerictextbox in Angular Numerictextbox component

28 Sep 20232 minutes to read

By default, the value of the NumericTextBox sets to null. In some applications, the value of the NumericTextBox should not be null at any instance. In such cases, following sample can be used to prevent nullable input in NumericTextBox.

app.component.ts

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

@Component({
    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() {
   }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { NumericTextBoxModule } from '@syncfusion/ej2-angular-inputs';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, NumericTextBoxModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);