Forms Support

You can use the DatePicker in Template-driven and Reactive forms.

Template-Driven Forms

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

The following example demonstrates how to use the DatePicker in template-driven forms.

Example
View Source
Edit In Stackblitz  
Change Theme:

Reactive Forms

The FormGroup decorator provides a way to render reactive forms. For more details, refer to the Angular documentation.

The following example demonstrates how to use the DatePicker in a reactive form.

Example
View Source
Edit In Stackblitz  
Change Theme:

FormField Association

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

Example
View Source
Edit In Stackblitz  
Change Theme: