Forms Support

You can 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]
           });
       }
   }

FormField Association

The following example demonstrates how to use the NumericTextBox within a FormField component and provide hint and error messages.


import { Component, ViewEncapsulation } from '@angular/core';
import { Validators, FormGroup, FormControl } from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <kendo-formfield [showHints]="'initial'" [showErrors]="'initial'">
                    <kendo-label [for]="amount" text="Amount"></kendo-label>
                    <kendo-numerictextbox #amount [formControlName]="'amount'" [min]="0"></kendo-numerictextbox>
                        <kendo-formhint [align]="'start'">
                            Hint: Amount
                        </kendo-formhint>
                        <kendo-formerror>Error: Amount is required</kendo-formerror>
                </kendo-formfield>
            </form>
        </div>
    `,
    styles: [`
        .example {
            display: flex;
            justify-content: center;
        }
        .k-form { width: 400px; }
    `],
    encapsulation: ViewEncapsulation.None
})

export class AppComponent {
    public form: FormGroup;

    public userData: any = {
        amount: 0
    };

    constructor() {
        this.form = new FormGroup({
            amount: new FormControl(this.userData.amount, [Validators.required])
        });
    }
}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article