home chevron_right User Interface
Forms
Reactive Forms

Angular reactive forms facilitate a reactive style of programming that favors explicit management of the data flowing between a non-UI data model (typically retrieved from a server) and a UI-oriented form model that retains the states and values of the HTML controls on screen. Reactive forms offer the ease of using reactive patterns, testing, and validation.

Reactive Form Example
Company (disabled) domain
First name account_circle First Name is required! Last name account_circle Last Name is required!
Address Address is required! Address 2 Address 2 is required!
City location_city City is required! State location_city State is required! Postal Code markunread_mailbox {{postalCode.value.length}} / 5 Postal Code is required!
Country United States of America United Kingdom Russia China Japan Turkey outlined_flag Country is required!
Reactive Form Model
{{form.getRawValue() | json}}
Horizontal Stepper

Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps. mat-horizontal-stepper selector can be used to create a horizontal stepper.

Fill out your name
First Name First Name is required! Last Name Last Name is required!
Fill out your address
Address Address is required!
Fill out your address
City City is required! State State is required! Postal Code {{postalCode2.value.length}} / 5 Postal Code is required!
Done
Thank your for filling out our form.
Vertical Stepper

Angular Material's stepper provides a wizard-like workflow by dividing content into logical steps. mat-vertical-stepper can be used to create a vertical stepper.

Fill out your name
First Name First Name is required! Last Name Last Name is required!
Fill out your address
Address Address is required!
Fill out your address
City City is required! State State is required! Postal Code {{postalCode3.value.length}} / 5 Postal Code is required!
Done
Thank your for filling out our form.