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
-
Let's Code Together - Building a Search Form
- Introduction
- Code Walkthrough and First Assignment
- Add ReactiveForms Module
- Create Initial Form
- Call Search Method
- Name Searching
- Using Select with Reactive Forms
- Implement League Search
- Implement Game Night Search
- Implement Recruiting Search
- Implement Coed Search
- Implement Max Search Fee
- Implement Record Search & Summary
-
Lets Code Together - Building an Edit Form with Reactive Forms
- Introduction
- Demo Code Walkthrough
- First Assignment
- Create the Basic Form
- Hook Up Form Events
- Show & Hide the Form
- Set the Name on Edit
- Save Changes to Name
- Set and Save GameNights
- Set and Save Max Teams & Coed
- Set seasonStarts & seasonEnds
- Save sasonStarts & seasonEnds
- Set & Save the Contact Emails
- Adding New Contact Emails
- Deleting Contact Emails
- Lets Code Together - Validating an Edit Form with Reactive Forms
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
-
Let's Code Together - Building a Search Form
- Introduction
- Code Walkthrough and First Assignment
- Add ReactiveForms Module
- Create Initial Form
- Call Search Method
- Name Searching
- Using Select with Reactive Forms
- Implement League Search
- Implement Game Night Search
- Implement Recruiting Search
- Implement Coed Search
- Implement Max Search Fee
- Implement Record Search & Summary
-
Lets Code Together - Building an Edit Form with Reactive Forms
- Introduction
- Demo Code Walkthrough
- First Assignment
- Create the Basic Form
- Hook Up Form Events
- Show & Hide the Form
- Set the Name on Edit
- Save Changes to Name
- Set and Save GameNights
- Set and Save Max Teams & Coed
- Set seasonStarts & seasonEnds
- Save sasonStarts & seasonEnds
- Set & Save the Contact Emails
- Adding New Contact Emails
- Deleting Contact Emails
- Lets Code Together - Validating an Edit Form with Reactive Forms
FormControl extends from a base class called AbstractControl, which has 3 children known as the "building blocks" of @angular/forms. These 3 children are: FormControl, FormGroup, and FormArray. These controls have common methods and properties, some of which include tracking current value, validation status, and resetting the state. Both FormGroup and FormArray aggregate other controls, more commonly FormControls.
That's why we're going to learn about FormControl first. FormControl gives us the power to track value of a form element, updating it as needed, and track validation state as well.