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!
1600 Amphitheatre Pkwy 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
1600 Amphitheatre Pkwy 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
1600 Amphitheatre Pkwy 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.