Outline
- Intro to Reactive Forms in Angular - Course Introduction
- Intro to Reactive Forms in Angular - FormControl Foundations
- Intro to Reactive Forms in Angular - Building a Form with Groups
- Intro to Reactive Forms in Angular - Simplify Form Creation
-
Intro to Reactive Forms in Angular - Make Forms Dynamic
- Introduction
- Demo: FormArray with FormControls in the Component
- Exercise: Fix the Errors! FormArray with FormControls
- Solution: Fix the Errors! FormArray with FormControls
- Demo: FormArray with FormControls in the Template
- Exercise: FormArray with FormControls
- Solution: FormArray with FormControls
- Demo: Removing Items from a FormArray
- Demo: FormArray with FormGroups
- Exercise: FormArray with FormGroups
- Solution: FormArray with FormGroups
- Wrap Up
-
Intro to Reactive Forms in Angular - Validate Forms
- Introduction
- Demo: Built-in Validators
- Exercise: Built-in Validators
- Solution: Built-in Validators
- Demo: Adding Error Messages
- Exercise: Adding Error Messages
- Solution: Adding Error Messages
- Styling Controls for Validity
- Update Validators Dynamically
- Demo: Custom Validators
- Exercise: Custom Validators
- Solution: Custom Validators
- Demo: Cross-field Validation
- Exercise: Cross-field Validation
- Solution: Cross-field Validation
- Wrap Up
- Intro to Reactive Forms in Angular - Course Wrap Up
Outline
- Intro to Reactive Forms in Angular - Course Introduction
- Intro to Reactive Forms in Angular - FormControl Foundations
- Intro to Reactive Forms in Angular - Building a Form with Groups
- Intro to Reactive Forms in Angular - Simplify Form Creation
-
Intro to Reactive Forms in Angular - Make Forms Dynamic
- Introduction
- Demo: FormArray with FormControls in the Component
- Exercise: Fix the Errors! FormArray with FormControls
- Solution: Fix the Errors! FormArray with FormControls
- Demo: FormArray with FormControls in the Template
- Exercise: FormArray with FormControls
- Solution: FormArray with FormControls
- Demo: Removing Items from a FormArray
- Demo: FormArray with FormGroups
- Exercise: FormArray with FormGroups
- Solution: FormArray with FormGroups
- Wrap Up
-
Intro to Reactive Forms in Angular - Validate Forms
- Introduction
- Demo: Built-in Validators
- Exercise: Built-in Validators
- Solution: Built-in Validators
- Demo: Adding Error Messages
- Exercise: Adding Error Messages
- Solution: Adding Error Messages
- Styling Controls for Validity
- Update Validators Dynamically
- Demo: Custom Validators
- Exercise: Custom Validators
- Solution: Custom Validators
- Demo: Cross-field Validation
- Exercise: Cross-field Validation
- Solution: Cross-field Validation
- Wrap Up
- Intro to Reactive Forms in Angular - Course Wrap Up
In this course we’ll learn how to build robust data-entry forms with Angular Reactive Forms. Reactive forms are a really powerful, flexible option in creating forms.
A simpler alternative would be the template-driven form. Now what makes reactive forms different?
- Most work is done in the component, which means it’s easier for us to reuse code.
- The data model is immutable and kept pure.
- We get synchronous access to data and form models, which provides us more predictability.
- Access to low-level APIs gives us more control. Scalability is improved due to access to the low-level APIs and form model.
- It is easier to test reactive forms as we don’t need to interact with change detection or render the UI.
All in all, though reactive forms have a steeper learning curve, if you need more than a very basic form, it can be worth it to choose the explicit, model-driven approach.