All Components

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")
    });
}
In this article