All Components

Forms Support

You can use the MaskedTextBox in template-driven or reactive forms.

Template-Driven Forms

The template-driven forms enable you to bind the value of the MaskedTextBox to the forms model by using the ngModel directive.

The following example demonstrates how to use the MaskedTextBox in a template-driven form.

@Component({
    selector: 'my-app',
    template: `
        <form #form="ngForm">
            <div class="example-config">
                <pre>{{ value | json }}</pre>
            </div>
            <label>
            Select Gender:
                <kendo-maskedtextbox
                name="masked"
                [mask]="'??????????'"
                [(ngModel)]="value"
            >
            </kendo-maskedtextbox> <br />
            </label>
        </form>
    `
   })
export class AppComponent {
  public value: string;
}

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 MaskedTextBox in a reactive form.

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

   @Component({
       selector: 'my-app',
       template: `
           <div class="example-config">
               Question mark (?) is a placeholder for a letter or a space.
           </div>
           <form [formGroup]="form" #reactiveForm="ngForm">
               <kendo-maskedtextbox formControlName="masked" [mask]="'??????????'"></kendo-maskedtextbox> <br />
               <p *ngIf="form.controls.masked.errors">{{form.controls.masked.errors | json}}</p>
           </form>
       `
   })
   class AppComponent {
       public form: FormGroup;
       constructor(private formBuilder: FormBuilder) {
           this.form = this.formBuilder.group({
               masked: ["John"]
           });
       }
   }
In this article