Angular Reactive Forms

https://www.pluralsight.com/courses/angular-reactive-forms

by Jim Cooper


Mod 1: Course Overview

  1. Course Overview

Mod 2: Getting Started with Angular Reactive Forms

  1. Introduction
  2. Angular Forms Architecture Overview
  3. Template Driven vs. Reactive Forms
  4. Cloning and Exploring Our Demo Application
    • demo of InMemoryDbService
      • will intercept http calls and return mock data

Mod 3: Creating Angular Reactive Forms
  1. Introduction
    • shows how to import ReactiveFormsModule
  2. Adding Reactive Forms to a Project
  3. Creating Form Controls
  4. The Magic of the ControlVa lueAccessor Directive
  5. Providing Values to FormControls
  6. Creating FormGroups
    • you use formControl directive when you don't have a form group
    • if you have a formgGroup, you use the formControlName directive
  7. Submitting a Reactive Form
    • use case for Partial in typescript
  8. Saving Submitted Form Data
  9. Adding Unbound FormControls to a FormGroup
    • shows how to have a form element that is not visible (is it hidden input?) huh
  10. Creating Nested FormGroups
    • use case for getRawValue on a formgroup
    • use formGroupName directive for a nested formgroup
  11. Simplifying with FormBuilder and FormGroup.setValue()
    • formBuilder simplifies the creation of a form group 
    • You can use this.fb.nonNullable to make all form fields non nullable
      • you can override to make a field null
    • if the shape of the formBuilder and your target object are the same, you can initialize the formBuilder with a one liner: this.contactForm.setValue(<name of your object instance>)
  12. Summary
Mod 4: Working with Input Elements and Data Types
  1. Introduction
  2. Working with Radio Buttons
    • use the same formControlName on all radios in the group
      • you don't have to set the name attribute
      • dynamically set value by doing [value]='...'
  3. Working with Select Lists
    • dynamically set value by doing [value]='...'
  4. Working with Checkboxes
  5. Working with Numeric Inputs
  6. Working with Range Inputs
  7. Working with Textarea Elements
  8. Working with Date Values
  9. Summary
Mod 5: Validating Angular Reactive Forms
  1. Introduction
  2. Angular's Built-in Validators
  3. Adding Validation to FormControls
    • when working with formbuilder, you set validators like this: 
      this.fb.group({
...
firstname: ['', Validators.required]
...
});
  4. Displaying Validation Messages
  5. Handling Multiple Validators on a Single Field
    • use case for a getter
    • when you have a formcontrol with multiple validators, inspect the errors object to determine which validator is failing
      • *ngIf='firstName.errors?.['required']' ..."
  6. Validating FormGroups and Forms
  7. Creating Custom Validators
  8. Passing Data to and from Custom Validators
    • a custom validation is not required to returned a Boolean
    • a demo of a custom validation that returns a string instead of a Boolean
  9. Summary
Mod 6: Creating Custom Controls and ControlValueAccessors
  1. Introduction
  2. Creating a Custom DateValueAccessor
    • ControlValueAccessor as a directive on type input
    • register the directive as an ng value provider

  3. Custom DateValueAccessor: Implementing writeValue()
  4. Custom DateValueAccessor: Handling Input Events
  5. Creating Custom Input Controls
  6. Binding a Custom Component to a FormControl
    • a component as a ControlValueAccessor 
    • registerOnTouched is needed to know if the control has been touched for validation 
  7. Summary
Mod 7: Dynamically Adding Form Elements
  1. Introduction
  2. Understanding FormArrays
  3. Adding FormArrays to a Form Model
    • you bind a formArray with FormArrayName
  4. Dynamically Adding Form Elements
    • looping formgroups inside of a formarray
    • you may have to manually push all your formgorups into a formArray in ngOnInit
      • even when using setValue, you will have to push empty formgroups
  5. Summary
Mod 8: Reacting to Changes
  1. Introduction
  2. Subscribing to Value Changes
  3. Reacting to Value Changes
    • you can dynamically add a validator to a control using addValidators method
      • to remove a validator, use removeValidators method
    • use updateValueAndValidity method to notify angular to force validation check
      • use distictUntilChnaged to prevent an infinite loop
  4. Adding Reactive Transformations
    • example of how to temporarily remove a validaors and add it back
  5. Summary

Comments

Post a Comment

Popular posts from this blog

Angular Routing and Navigation Playbook

Image
https://www.pluralsight.com/courses/angular-routing-navigation-playbook by Lara Newsom Course Overview Course Overview Course Introduction and Code Examples Course Introduction and Code Examples Basic Angular Routing Setup Introduction to Angular Routing Discussion: Angular RouterModule Exports Demo: Bootstrap Angular RouterModule Discussion: Declaring Routes angular has tow route path match strategies: prefix based or full match prefix is the default Demo: Declaring Default and Home Routes two options for declaring a default route: {path: ' ', componenet: DefaultComponent} {path: ' ', redirectTo: 'home', pathMatch: 'full'} Discussion: Child Routes and Route Order Demo: Declaring a Wildcard Route wild card routes is: path: '**' to enabled logging all navigation events to the console, enable tracing Demo: Hooking into Router Events Routing in Standalone Component Applications Introduction to Standalone Components and Routing Demo: Bootstrapping Ro...
Read more

Working with Files in C# 10

https://www.pluralsight.com/courses/c-sharp-10-working-files by Jason Roberts Course Overview Course Overview Sandbox Managing Files and Directories Introduction Creating a New Console App Checking if a File Exists you can use to check if file path is an absolute path: Path.IsPathFullyQualified Getting the Parent Directory of a Path Checking if a Directory Exists and Creating New Directories Copying a File Moving a File Getting the File Extension from a File Name Checkpoint 01- Get the Parent Directory for a Path Changing a Filename Extension Checkpoint 02 - Get the Extension Part of a Filename Deleting a Directory Enumerating All the Files in a Directory Summary Exercise 01- Copying and Deleting Files Monitoring the File System for Changes Introduction Introducing the FileSystemWatcher Class The IntemalBufferSize Property Configuring Notification Filters Additional Properties Refactoring to Use a FileSystemWatcher use FileSystemWatcher to watch for file changes in a folder Checkpo...
Read more

Mastering Git

https://app.pluralsight.com/library/courses/master-git/table-of-contents by Paolo Perrotta Module 1: Course Overview Course Overview Module 2: The Four Areas: Introduction Version Check About This Training A Note About the Command Line Introducing the Four Areas The Working Area The Repository The Index Module 3: The Four Areas: Basic Workflow Revisiting the Basics Moving Data to the Right Moving Data to the Left Removing Files Renaming Files A Quick Summary Module 4: The Four Areas: Git Reset Understanding Reset A Reset Example More Reset Examples Module 5: The Four Areas: Advanced Tools Stashing Data Solving Conflicts Working with Paths Committing Parts of a File Introducing Switch and Restore Git Is a Toolbox Module 6: History: Exploring the Past Becoming a History Surgeon Referencing Commits to show changes in a commit: git show HEAD to show changes in a commit parent: git show HEAD^ Tracking Changes in History Browsing the Log Module 7: History: Fixing Mistakes Reviewing the Golde...
Read more