Forms Overview

Handling user input with forms is one of the main features of software applications.

Users send information to sites or apps in order to achieve their end goal, such as signing up for a new service, or sending a product review. Forms act as a communication bridge and can consist of complex structures, built on top of the initial form component functionality.

Kendo UI for Angular provides comprehensive support for building Angular forms, along with sharing valuable best practices described in the Form Guidelines article.

For the full list of components which support Reactive and Template-Driven Forms, refer to the article on forms support by Kendo UI for Angular.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <fieldset class="k-form-fieldset">
                    <legend class="k-form-legend">Your account</legend>

                    <kendo-avatar [initials]="'EG'" width="80px"  height="80px" [shape]="'circle'"></kendo-avatar>
                    <kendo-formfield>
                        <kendo-label [for]="username" text="Username"></kendo-label>
                        <input formControlName="username" kendoTextBox #username required/>

                        <kendo-formhint>Your Username</kendo-formhint>
                        <kendo-formerror>Error: Username is required</kendo-formerror>
                    </kendo-formfield>
                    <kendo-formfield>

                        <kendo-label [for]="password" text="Password">
                        </kendo-label>
                        <input type="password" formControlName="password" kendoTextBox #password required/>

                        <kendo-formhint>Your password</kendo-formhint>
                        <kendo-formerror>Error: Password is required</kendo-formerror>
                    </kendo-formfield>

                    <kendo-formfield>
                        <div class="k-checkbox-wrap">
                            <input #loggedin type="checkbox" kendoCheckBox formControlName="loggedin"/>
                            <kendo-label [for]="loggedin" class="k-checkbox-label" text="Keep me logged in"></kendo-label>
                        </div>
                        <kendo-formhint>Next time, you will be logged in automatically</kendo-formhint>
                    </kendo-formfield>

                    <div class="k-form-buttons">
                        <button class="k-button k-primary" (click)="login()">Login</button>
                        <button class="k-button" (click)="clearForm()">Clear</button>
                    </div>
                </fieldset>
            </form>
        </div>
    `,
    styles: [`
        .k-avatar {
          margin-left: 80px;
          font-size: 30px;
        }
        .example {
            display: flex;
            justify-content: center;
        }
        .k-form {
            width: 240px;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    public form: FormGroup = new FormGroup({
        username: new FormControl(),
        password: new FormControl(),
        loggedin: new FormControl()
    });

    public login(): void {
        this.form.markAllAsTouched();
    }

    public clearForm(): void {
        this.form.reset();
    }
}
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 { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LayoutModule } from '@progress/kendo-angular-layout';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        DateInputsModule,
        InputsModule,
        LayoutModule,
        LabelModule
    ]
})
export class AppModule { }
import { enableProdMode, NgModule } from '@angular/core';
import { AppModule } from './app.module.ts';

enableProdMode();

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

In this article