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
This demo will show you how to create a custom validator. We'll customize how the phoneNumber control can be formatted to be considered valid. Outside our component class, we'll add the validator function:
function phoneValidator(control: AbstractControl): {[key: string]:any } | null {
const phoneRegex = /^[0-9]{3}-[0-9]{3}-[0-9]{4}$/;
if (phoneRegex.test(control.value)) {
return null;
} else {
return {
invalidPhone: true
};
}
}
This returns either null, to show no errors, or an error map with a key/value pair representing the error's name as the key. Generally the "any" value is a boolean to indicate if the error is to be added to the errors list on the control. Instead of explicitly typing out this error map, the ValidationErrors type alias can be used. For the phoneValidator, we'll return an error object with a key of invalidPhone and add it to the phoneNumber control's errors list if it doesn't match the pattern of the phoneRegex.
We'll also learn how to add updateOn: "blur"
to the form control. This way, the error message only shows up once the user is done typing in the phoneNumber and has left the field.