All Components

NumericTextBox Overview

The NumericTextBox lets the user edit and submit specific numeric values by typing or by using the spin buttons.

Basic Usage

The following example demonstrates the NumericTextBox in action.

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox
            [value]="value"
        ></kendo-numerictextbox>
    `
})

class AppComponent {
    public value: number = 5;
}

Configuration

The NumericTextBox provides configuration options for:

Show and Hide the Spin Buttons

When enabled, the spin buttons increase or decrease the value with the predefined step. By default, the spinners property is set to true. To hide the buttons, set the property to false.

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox
            [spinners]="false"
            [step]="1"
            [value]="5"
        ></kendo-numerictextbox>
    `
})

class AppComponent {}

Manage Formats

The format of the component can be controlled by using the format property, which accepts string parameters. When format is set and the input element is not focused, the value is formatted accordingly. By default, the format is set to 'n2'.

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox
            [format]="'c0'"
            [step]="step"
            [value]="value"
        ></kendo-numerictextbox>
    `
})

class AppComponent {
    public value: number = 5;
    public step: number = 1;
}

Manage Predefined Steps

The step is defined through the step property. When step is set, you can increase or decrease the value of the component that adopts the predefined step by using the spin buttons or through the increaseValue and decreaseValue methods.

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox
            [step]="step"
            [value]="value"
        ></kendo-numerictextbox>
    `
})

class AppComponent {
    public value: number = 5;
    public step: number = 3;
}

Set Precision

When setting the precision, the NumericTextBox provides configuration options for:

Round and Truncate User Input

When round is set to true and the user enters a value whose length of fractions is larger than the one defined by the decimals property, the value is rounded. When round is set to false, the value is truncated. By default, the value of the round property is set to true.

@Component({
    selector: 'my-app',
    template: `
    <div class="example-config">
        Enter value with more than two decimal points, e.g. <strong>5.1267</strong>.
    </div>
    <div class="example-wrapper">
        <div class="row">
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Value is rounded - [round]="true"</p>
                <kendo-numerictextbox
                    [round]="true"
                    [decimals]="decimals"
                    [value]="value"
                ></kendo-numerictextbox>
            </div>
            <div class="col-xs-12 col-sm-6 example-col">
                <p>Value is truncated - [round]="false"</p>
                <kendo-numerictextbox
                    [round]="false"
                    [decimals]="decimals"
                    [value]="value"
                ></kendo-numerictextbox>
            </div>
        </div>
    </div>
    `
})

class AppComponent {
    public decimals: number = 2;
    public value: number = 5.12;
}

Restrict User Input

It is possible to restrict the user input while typing by using the restrictDecimals property. When restrictDecimals is set to true, the user is allowed to enter a value whose precision is no greater than the one defined by the decimals property. By default, the value of the restrictDecimals property is set to false.

@Component({
    selector: 'my-app',
    template: `
        <kendo-numerictextbox
            [restrictDecimals]="true"
            [decimals]="decimals"
            [format]="format"
            [value]="value"
        ></kendo-numerictextbox>
    `
})

class AppComponent {
    public decimals: number = 3;
    public value: number = 5;
    public format: string = 'n3';
}

Set Value Ranges

It is possible to control the range of the value by providing values for the min, max and autoCorrect properties. When the min, max and autoCorrect properties are set, the component cannot hold a value that is greater than max and smaller than min.

@Component({
    selector: 'my-app',
    template: `
        <p>Enter value between 1 and 5.</p>
        <kendo-numerictextbox
            [autoCorrect]="autoCorrect"
            [min]="min"
            [max]="max"
            [value]="value"
        ></kendo-numerictextbox>
    `
})

class AppComponent {
    public autoCorrect: boolean = true;
    public min: number = 1;
    public max: number = 5;
    public value: number = 2;
}

Forms Support

It is possible to use the NumericTextBox in template-driven or reactive forms.

Template-Driven Forms

The following example demonstrates how to use the component in template-driven forms by using the ngForm directive.

export interface User {
       age: Number;
   }

   @Component({
       selector: 'my-app',
       template: `
           <div class="example-config">
               <p>Only values between 1 and 100 are valid.</p>
               <p *ngIf="!templateForm.valid">{{templateForm.controls.age.errors | json}}</p>
           </div>
           <form #templateForm="ngForm">
               <kendo-numerictextbox name="age" [(ngModel)]="user.age" [min]="1" [max]="100"></kendo-numerictextbox>
           </form>
       `
   })
   class AppComponent implements OnInit {
       public user: User;
       ngOnInit() {
           this.user = {
               age: 33
           };
       }
   }

Reactive Forms

The FormGroup provides a way to render reactive forms. For more details, refer to the Angular Documentation.

The following example demonstrates how to use the NumericTextBox in a reactive form.

import {
       FormsModule,
       ReactiveFormsModule,
       FormGroup,
       FormBuilder
   } from '@angular/forms';

   @Component({
       selector: 'my-app',
       template: `
           <div class="example-config">
               <p>Only values between -10 and 20 are valid.</p>
               <p *ngIf="form.controls.numeric.errors">{{form.controls.numeric.errors | json}}</p>
           </div>
           <form [formGroup]="form" #reactiveForm="ngForm">
               <kendo-numerictextbox formControlName="numeric" [min]="-10" [max]="20"></kendo-numerictextbox>
           </form>
       `
   })
   class AppComponent {
       public form: FormGroup;
       constructor(private formBuilder: FormBuilder) {
           this.form = this.formBuilder.group({
               numeric: [20]
           });
       }
   }

Internationalization

The NumericTextBox provides support for internationalization by using the Kendo UI Internationalization package.

For more information on how to configure the NumericTextBox to use a different locale from the default one, refer to the Internationalization overview article.

Keyboard Navigation

For more information on the keyboard shortcuts the NumericTextBox supports, refer to the article on keyboard navigation.

Accessibility

For more information on the accessibility features of the NumericTextBox, refer to the article on accessibility.

In this article