All Components

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>Value: {{ user.age }} </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>Value: {{ form.controls.numeric.value }} </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]
           });
       }
   }
In this article