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
For this final exercise, you're going to build a sports league registration form. Here's your opportunity to practice everything we've learned together in one application so you can really master your skills and see how it all connects.
Exercise Instructions
1. Initialize the form with FormBuilder, using at least one nested FormGroup of your choosing
2. Allow the user to invite as many teammates as they want by hooking up a FormArray. Allow them to add & remove emails
3. Bind shirt size selection to update the control’s value
4. Add built-in validators for controls with placeholders of “required”, shirt size, and require the waiver has been agreed to
5. Create a custom validator so last name can’t include “null” in it
6. Show error messages & use getters for shorthand
7. Update at least 1 validator dynamically. For example, if the team selected is “Other”, require a new team name to be defined, otherwise it's optional
Link to Exercise: https://stackblitz.com/fork/rxngforms-finalexercise