Forms Support

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

The component accepts values of the complex (objects) or the primitive (strings or numbers) type. To specify the value type, set the valuePrimitive property. By default, it is set to false—the value has to match the data type.

Template-Driven Forms

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

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

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

    public gender: { text: string, value: number } = { text: "Female", value: 2 };
}

The following example demonstrates how to accomplish a two-way data binding when 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 | json }}</strong>
        </div>
        <label>
            Select Gender:
            <kendo-combobox
                name="gender"
                [data]="genders"
                [textField]="'text'"
                [valueField]="'value'"
                [valuePrimitive]="true"
                [(ngModel)]="gender"
            >
            </kendo-combobox>
        </label>
    </form>
  `
})
class AppComponent {
    public genders: Array<{ text: string, value: number }> = [
        { text: "Male", value: 1 },
        { text: "Female", value: 2 },
        { text: "Other", value: 3 }
    ];

    public gender: { text: string, value: number } = 2;
}

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 ComboBox 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-combobox
                formControlName="gender"
                [data]="genders"
                [textField]="'text'"
                [valueField]="'value'"
                [valuePrimitive]="true"
                required
            >
            </kendo-combobox>
        </label>
    </form>
  `
})
class AppComponent {
    public genders: Array<{ text: string, value: number }> = [
        { text: "Male", value: 1 },
        { text: "Female", value: 2 },
        { text: "Other", value: 3 }
    ];

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

The following example demonstrates how to use the ComboBox in a reactive form with a complex 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 | json}}</strong></p>
        </div>
        <label>
            Select gender
            <kendo-combobox
                formControlName="gender"
                [data]="genders"
                [textField]="'text'"
                [valueField]="'value'"
                required
            >
            </kendo-combobox>
        </label>
    </form>
  `
})
class AppComponent {
    public genders: Array<{ text: string, value: number }> = [
        { text: "Male", value: 1 },
        { text: "Female", value: 2 },
        { text: "Other", value: 3 }
    ];

    public myForm: FormGroup = new FormGroup({
        gender: new FormControl({ text: "Female", value: 2 })
    });
}

FormField Association

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

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

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <kendo-formfield>
                    <kendo-label [for]="country" text="Country"></kendo-label>
                    <kendo-combobox
                        #country
                        [formControlName]="'country'"
                        [data]="countries"
                        [kendoDropDownFilter]="{ operator: 'contains' }"
                    >
                    </kendo-combobox>
                    <kendo-formhint>Current country 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({
        country: new FormControl(null, Validators.required)
    });

    public countries: string[] = countries;
}
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 countries = ['Afghanistan', 'Albania', 'Algeria', 'American Samoa', 'Andorra', 'Angola', 'Anguilla', 'Antigua and Barbuda', 'Argentina', 'Armenia', 'Aruba', 'Australia', 'Austria', 'Azerbaijan', 'Bahamas', 'Bahrain', 'Bangladesh', 'Barbados', 'Belarus', 'Belgium', 'Belize', 'Benin', 'Bermuda', 'Bhutan', 'Bolivia', 'Bosnia and Herzegovina', 'Botswana', 'Bouvet Island', 'Brazil', 'British Indian Ocean Territory', 'Brunei Darussalam', 'Bulgaria', 'Burkina Faso', 'Burundi', 'Cambodia', 'Cameroon', 'Canada', 'Cape Verde', 'Cayman Islands', 'Central African Republic', 'Chad', 'Chile', 'China', 'Christmas Island', 'Cocos (Keeling) Islands', 'Colombia', 'Comoros', 'Congo', 'Congo, Democratic Republic of the', 'Cook Islands', 'Costa Rica', 'Cote D`Ivoire', 'Croatia', 'Cuba', 'Cyprus', 'Czech Republic', 'Denmark', 'Djibouti', 'Dominica', 'Dominican Republic', 'Ecuador', 'Egypt', 'El Salvador', 'Equatorial Guinea', 'Eritrea', 'Estonia', 'Ethiopia', 'Falkland Islands (Malvinas)', 'Faroe Islands', 'Fiji', 'Finland', 'France', 'French Guiana', 'French Polynesia', 'French Southern Territories', 'Gabon', 'Gambia', 'Georgia', 'Germany', 'Ghana', 'Gibraltar', 'Greece', 'Greenland', 'Grenada', 'Guadeloupe', 'Guam', 'Guatemala', 'Guernsey', 'Guinea', 'Guinea-Bissau', 'Guyana', 'Haiti', 'Heard Island and Mcdonald Islands', 'Holy See (Vatican City State)', 'Honduras', 'Hong Kong', 'Hungary', 'Iceland', 'India', 'Indonesia', 'Iran, Republic Of', 'Iraq', 'Ireland', 'Isle of Man', 'Israel', 'Italy', 'Jamaica', 'Japan', 'Jersey', 'Jordan', 'Kazakhstan', 'Kenya', 'Kiribati', 'Korea, People`s Republic of', 'Korea, Republic of', 'Kosovo', 'Kuwait', 'Kyrgyzstan', 'Lao People`s Democratic Republic', 'Latvia', 'Lebanon', 'Lesotho', 'Liberia', 'Libya', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macao', 'Madagascar', 'Malawi', 'Malaysia', 'Maldives', 'Mali', 'Malta', 'Marshall Islands', 'Martinique', 'Mauritania', 'Mauritius', 'Mayotte', 'Mexico', 'Micronesia, States of', 'Moldova, of', 'Monaco', 'Mongolia', 'Montenegro', 'Montserrat', 'Morocco', 'Mozambique', 'Myanmar', 'Namibia', 'Nauru', 'Nepal', 'Netherlands', 'Netherlands Antilles', 'New Caledonia', 'New Zealand', 'Nicaragua', 'Niger', 'Nigeria', 'Niue', 'Norfolk Island', 'North Macedonia', 'Northern Mariana Islands', 'Norway', 'Oman', 'Pakistan', 'Palau', 'Palestinian Territory,', 'Panama', 'Papua New Guinea', 'Paraguay', 'Peru', 'Philippines', 'Pitcairn', 'Poland', 'Portugal', 'Puerto Rico', 'Qatar', 'Rwanda', 'Romania', 'Russian Federation', 'Saint Helena', 'Saint Kitts and Nevis', 'Saint Lucia', 'Saint Pierre and Miquelon', 'Saint Vincent and the Grenadines', 'Samoa', 'San Marino', 'Sao Tome and Principe', 'Saudi Arabia', 'Senegal', 'Serbia', 'Seychelles', 'Sierra Leone', 'Singapore', 'Slovakia', 'Slovenia', 'Solomon Islands', 'Somalia', 'South Africa', 'South Georgia and the South Sandwich Islands', 'Spain', 'Sri Lanka', 'Sudan', 'South Sudan', 'Suriname', 'Svalbard and Jan Mayen', 'Swaziland', 'Sweden', 'Switzerland', 'Syria', 'Taiwan', 'Tajikistan', 'Tanzania', 'Thailand', 'Timor-Leste', 'Togo', 'Tokelau', 'Tonga', 'Trinidad and Tobago', 'Tunisia', 'Turkey', 'Turkmenistan', 'Turks and Caicos Islands', 'Tuvalu', 'Uganda', 'Ukraine', 'United Arab Emirates', 'United Kingdom', 'United States', 'Uruguay', 'Uzbekistan', 'Vanuatu', 'Venezuela', 'Vietnam', 'Virgin Islands,', 'Wallis and Futuna', 'Western Sahara', 'Yemen', 'Zambia', 'Zimbabwe', 'Åland Islands'];
import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

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

In this article