Join our newsletter!
Get exclusive content, resources, and more!
1-2 emails per week, no spam
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
https://stackblitz.com/fork/rxngforms-formgroupbasic-solution
Solution
1. In the applicationForm initialization, change the = to : and remove semicolons. Add a comma at the end of line 24. In this way you're giving the FormGroup constructor an object with key/values.
2. In the template, change the directives of both inputs from [formControl] to formControlName since they now are wrapped in the applicationForm FormGroup.