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
First Name is required! Last Name is required!
Address is required! Address 2 is required!
City is required! State is required! {{postalCode.value.length}} / 5 Postal Code needs to be max. {{formErrors.postalCode.maxlength.requiredLength}} characters Postal Code is required!
United States of America United Kingdom Russia China Japan Turkey Country is required!
Reactive Form Errors Model
{{formErrors | 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 is required! Last Name is required!
Fill out your address
Address is required!
Fill out your address
City is required! State is required! {{postalCode.value.length}} / 5 Postal Code needs to be max. {{horizontalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters 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 is required! Last Name is required!
Fill out your address
Address is required!
Fill out your address
City is required! State is required! {{postalCode.value.length}} / 5 Postal Code needs to be max. {{verticalStepperStep3Errors.postalCode.maxlength.requiredLength}} characters Postal Code is required!
Done
Thank your for filling out our form.