Forms Support

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

The component accepts only data of the string primitive type.

Template-Driven Forms

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

The following example demonstrates how to accomplish a two-way data binding. The model field is a primitive value.

@Component({
  selector: 'my-app',
  template: `
    <form #form="ngForm">
        <div class="example-config">
            The selected gender is <strong>{{ gender }}</strong>
        </div>
        <div class="example-wrapper">
            <label>
                Select Gender:
                <kendo-autocomplete
                    name="gender"
                    [data]="genders"
                    [(ngModel)]="gender"
                >
                </kendo-autocomplete>
            </label>
        </div>
    </form>
  `
})
class AppComponent {
    public genders: Array<string> = [ "Male", "Female", "Other" ];

    public gender: string = "Male";
}

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 AutoComplete in a reactive form with a primitive value binding.
 

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

@Component({
  selector: 'my-app',
  template: `
    <form [formGroup]="myForm">
        <div class="example-config">
            <p>The form is valid: <strong>{{myForm.controls.gender.valid}}</strong></p>
            <p>The form.gender value is: <strong>{{myForm.controls.gender.value}}</strong></p>
        </div>
        <label>
            Select gender
            <kendo-autocomplete
                formControlName="gender"
                [data]="genders"
                required
            >
            </kendo-autocomplete>
        </label>
    </form>
  `
})
class AppComponent {
    public genders: Array<string> = [ "Male", "Female", "Other" ];

    public myForm: FormGroup = new FormGroup({
        gender: new FormControl("Male")
    });
}

FormField Association

The following example demonstrates the usage of the AutoComplete within a FormField with hint and error messages.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <kendo-formfield>
                    <kendo-label [for]="city" text="City"></kendo-label>
                    <kendo-autocomplete
                        #city
                        [formControlName]="'city'"
                        [data]="cities"
                        [kendoDropDownFilter]="{ operator: 'contains' }"
                    >
                    </kendo-autocomplete>
                    <kendo-formhint>Current city of residence</kendo-formhint>
                    <kendo-formerror>Required</kendo-formerror>
                </kendo-formfield>
            </form>
        </div>
    `,
    styles: [`
        .example {
            display: flex;
            justify-content: center;
        }
        .k-form {
            width: 400px;
        }
    `]
})
export class AppComponent {
    public form: FormGroup = new FormGroup({
        city: new FormControl(null, Validators.required)
    });

    public cities: string[] = cities;
}
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        DropDownsModule,
        LabelModule,
        InputsModule
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }
export const cities = ['Abu Dhabi', 'Abuja', 'Accra', 'Adamstown', 'Addis Abeba', 'Aga', 'Alger', 'Alofi', 'Amman', 'Amsterdam', 'Andorra la Vella', 'Ankara', 'Antananarivo', 'Apia', 'Ashgabat', 'Asmara', 'Astana', 'Asunci', 'Athenai', 'Avarua', 'Baghdad', 'Bairiki', 'Baku', 'Bamako', 'Bandar Seri Begawan', 'Bangkok', 'Bangui', 'Banjul', 'Basse-Terre', 'Basseterre', 'Beirut', 'Belfast', 'Belmopan', 'Beograd', 'Berlin', 'Bern', 'Bishkek', 'Bissau', 'Brasília', 'Bratislava', 'Brazzaville', 'Bridgetown', 'Bruxelles [Brussel]', 'Bucuresti', 'Budapest', 'Buenos Aires', 'Bujumbura', 'Cairo', 'Canberra', 'Caracas', 'Cardiff', 'Castries', 'Cayenne', 'Charlotte Amalie', 'Chisinau', 'Citt', 'Ciudad de Guatemala', 'Ciudad de M', 'Ciudad de Panam', 'Cockburn Town', 'Conakry', 'Copenhagen', 'Dakar', 'Dalap-Uliga-Darrit', 'Damascus', 'Dhaka', 'Dili', 'Djibouti', 'Dodoma', 'Doha', 'Dublin', 'Dushanbe', 'Edinburgh', 'El-Aai', 'Fagatogo', 'Fakaofo', 'Flying Fish Cove', 'Fort-de-France', 'Freetown', 'Funafuti', 'Gaborone', 'Garapan', 'Gaza', 'George Town', 'Georgetown', 'Gibraltar', 'Hamilton', 'Hanoi', 'Harare', 'Helsinki [Helsingfors]', 'Honiara', 'Islamabad', 'Jakarta', 'Jamestown', 'Jerusalem', 'Juba', 'Kabul', 'Kampala', 'Kathmandu', 'Khartum', 'Kigali', 'Kingston', 'Kingston', 'Kingstown', 'Koror', 'Kuala Lumpur', 'Kuwait', 'Kyiv', 'La Habana', 'La Paz', 'Libreville', 'Lilongwe', 'Lima', 'Lisboa', 'Ljubljana', 'Lom', 'London', 'London', 'Longyearbyen', 'Luanda', 'Lusaka', 'Luxembourg', 'Macao', 'Madrid', 'Malabo', 'Male', 'Mamoutzou', 'Managua', 'Manila', 'Maputo', 'Maseru', 'Masqat', 'Mata-Utu', 'Mbabane', 'Minsk', 'Mogadishu', 'Monaco-Ville', 'Monrovia', 'Montevideo', 'Moroni', 'Moscow', 'N`Djam', 'Nairobi', 'Nassau', 'New Delhi', 'Niamey', 'Nicosia', 'Nouakchott', 'Noum', 'Nuku`alofa', 'Nuuk', 'Oranjestad', 'Oslo', 'Ottawa', 'Ouagadougou', 'Palikir', 'Papeete', 'Paramaribo', 'Paris', 'Peking', 'Phnom Penh', 'Plymouth', 'Podgorica', 'Port Moresby', 'Port-Louis', 'Port-Vila', 'Port-au-Prince', 'Port-of-Spain', 'Porto-Novo', 'Praha', 'Praia', 'Pretoria', 'Pyongyang', 'Quito', 'Rabat', 'Rangoon (Yangon)', 'Reykjav', 'Riga', 'Riyadh', 'Road Town', 'Roma', 'Roseau', 'Saint George`s', 'Saint John`s', 'Saint-Denis', 'Saint-Pierre', 'San Jos', 'San Juan', 'San Marino', 'San Salvador', 'Sanaa', 'Santaf', 'Santiago de Chile', 'Santo Domingo de Guzm', 'Sarajevo', 'Seoul', 'Singapore', 'Skopje', 'Sofia', 'Stanley', 'Stockholm', 'Suva', 'Tallinn', 'Tbilisi', 'Tegucigalpa', 'Tehran', 'The Valley', 'Thimphu', 'Tirana', 'Tokyo', 'Toskent', 'Tripoli', 'Tunis', 'Tórshavn', 'Ulan Bator', 'Vaduz', 'Valletta', 'Victoria', 'Victoria', 'Vientiane', 'Vilnius', 'Warszawa', 'Washington', 'Wellington', 'West Island', 'Wien', 'Willemstad', 'Windhoek', 'Yamoussoukro', 'Yaound', 'Yaren', 'Yerevan', 'Zagreb', 'al-Manama'];
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

In this article