Course Overview

Template-driven Versus Reactive Forms

Introduction

Angular Forms Architecture Overview

Cloning and Exploring Our Demo Application

Adding Template-driven Forms to a Project

ngModel- Binding Input Elements to a Data Model

Behind the Scenes- The Control Value Accessor Directive

Defining a Data Model

Submitting a Template-driven Form

Populating a Form from API Data

Working with ngForm

Using ngModelGroup to Group Form Values

Using ngForm.submitted and the ngSubmitted Class

Preserving Hidden Data in an ngForm Value

Working with Radio Buttons

Working with Select Lists

Working with Checkboxes

Working with Numeric Inputs

Working with textarea Elements

Working with Range Inputs

Working with Date Values

Angular's Built-in Validators

Adding Validation to Form Elements

Implementing Custom Validators

Creating Custom Validators

Validating FormGroups and Forms

Passing Data to and from Custom Validators

Creating a Custom DateValueAccessor

Custom ControlValueAccessors- Implementing writeValue()

Binding a Custom Component to a Data Model

Creating Custom Input Controls

Custom ControlValueAccessors- Implementing registerOnChange()

Dynamic Forms Challenges

Working with Arrays to Create Dynamic Forms

Dynamically Adding Form Elements

Submitting a Dynamic Form

app.component.spec

app.component

app.config

app.routes

contact-list.component.spec

contact-list.component

cotnact-list.component.spec

contacts.service

contact.model

in-memory-contacts.service

edit-contact.component.spec

edit-contact.component

main

restricted-words-validator.directive

date-value-accessor.directive

profile-icon-names

profile-icon-selector.component.spec

profile-icon-selector.component