Angular Forms In Depth (Angular 18)

Angular Forms In Depth (Angular 18), available at $84.99, has an average rating of 4.52, with 56 lectures, based on 2057 reviews, and has 11554 subscribers.

You will learn about Code in Github repository with downloadable ZIP files per section Learn all about Template-Driven Forms Learn all about Reactive Forms Build custom validators, including asynchronous and multi-field validators Build custom form controls, including a file upload component Build reusable nested forms Build a large production-scale multi-step enterprise form This course is ideal for individuals who are Angular Developers, trying to Learn in Depth everything about Angular Forms It is particularly useful for Angular Developers, trying to Learn in Depth everything about Angular Forms.

Enroll now: Angular Forms In Depth (Angular 18)

Summary

Title: Angular Forms In Depth (Angular 18)

Price: $84.99

Average Rating: 4.52

Number of Lectures: 56

Number of Published Lectures: 56

Number of Curriculum Items: 56

Number of Published Curriculum Objects: 56

Original Price: $74.99

Quality Status: approved

Status: Live

What You Will Learn

Code in Github repository with downloadable ZIP files per section

Learn all about Template-Driven Forms

Learn all about Reactive Forms

Build custom validators, including asynchronous and multi-field validators

Build custom form controls, including a file upload component

Build reusable nested forms

Build a large production-scale multi-step enterprise form

Who Should Attend

Angular Developers, trying to Learn in Depth everything about Angular Forms

Target Audiences

Angular Developers, trying to Learn in Depth everything about Angular Forms

This course is an in-depth guide to Angular template-driven and reactive forms, and it comes with a running Github repository.

This Course In a Nutshell

Angular is very often used to build in-house enterprise applications, which are usually quite form-intensive. This type of application usually has a large number of complex data entry forms, with all sorts of complex form validation rules.

Angular provides us with all the tools that we need to build these complex forms in a scalable and user-friendly way via the Angular Forms module.

There are two types of forms available: template-driven and reactive forms, and we will cover both types of forms in detail in this course. We will also compare them and explain when to use each form type and why.

Course Overview

We will start this course by implementing a simple form using template-driven forms and ngModel. We will understand exactly how ngModel and ngForm work under the hood and the several ways of using these directives for both data binding and form validation.

We will learn template-driven forms in detail, including how to build custom form validators using custom directives. Next, we will refactor the same template-driven form that we have built into a reactive form, and we will compare the two approaches.

We will then use reactive forms to build a much more complex data entry form with all sorts of different types of controls, nested groups, arrays of controls, custom validators, asynchronous validators, multi-field validations, form draft pre-saving, and much more.

The multi-step reactive form that we will be building will be something very close to what you will find in a production application, and it allow us to easily demonstrate all the powerful features of reactive forms in one large step-by-step exercise.

We will learn how to build reusable nested forms (like an address form), and we will also cover file upload in detail. We will build a custom file upload control with a progress indicator and cancel upload capabilities.

We will finish the course by providing a complete example demonstrating how to use Form Arrays.

Table of Contents

This course covers the following topics:

– Introduction to the Angular Forms module

– Angular Material form components

– Template-driven Forms – how does ngModel work?

– Typical Form validation rules

– Form field validation error messages

– Using ngModel for one-way binding and bi-directional data binding

– Understanding ngModelOptions in detail

– Template-driven form custom validator

– How to use the FormBuilder service

– Refactoring of a form from template-driven to a reactive form

– Comparison between template-driven and reactive forms – when to use each and why

– Why are they called reactive forms? Understanding the multiple Observables available

– How to reset and set new values in a reactive form

– Development of a complex form using reactive forms

– How to use all types of commonly used form controls: normal inputs, text areas, radio buttons, checkboxes, calendars, auto-completion, etc.

– The formGroup and formControlName, and formControl directives

– Reactive forms custom validators – multi-field validation

– Backend validation of a form field using async validators

– Dependent fields – how to enable or disable some form fields depending on the values of other fields

– Pre-saving a form draft

– Building a multi-step form with Angular Material

– Reusable nested forms (an address form)

– Custom File Upload Form Control

– Form Arrays

What Will you Learn In this Course?

At the end of the course, you will have learned everything that you need to know for designing and developing complex data entry forms, that are both maintainable and user-friendly

You will be able to implement all sorts of commonly needed form validation rules, including the most advanced scenarios

You will feel comfortable using both template-driven and reactive forms, and you will know when to use each and why

Have a look at the course free lessons below, and please enjoy the course!

Course Curriculum

Chapter 1: Introduction

Lecture 1: Angular Forms In Depth -Helicopter View

Lecture 2: IMPORTANT

Lecture 3: Angular Forms In Depth – Development Environment Setup

Lecture 4: Introduction to Angular Forms – why do we need a Forms module?

Lecture 5: Introduction to Angular Material Form Controls

Chapter 2: Template Driven Forms In Depth

Lecture 1: Introduction to Template Driven Forms – the ngForm Directive

Lecture 2: Understanding how the Angular ngModel Directive Works

Lecture 3: Introduction to Form Validation

Lecture 4: Understanding Angular Forms CSS State Classes – ng-valid ng-dirty ng-touched

Lecture 5: How to Display Error Messages in an Angular Form

Lecture 6: Learn All the Built-in Template-Driven Form Validators

Lecture 7: How to use ngSubmit – Disabling the Form Submit button

Lecture 8: Advanced ngModel – ngModelChange and the ngModelOptions updateOn Property

Lecture 9: Advanced ngModel – ngModelOptions In Detail

Lecture 10: Understanding ngModel One Way and Bidirectional Data Binding

Lecture 11: Template Driven Forms Custom Field Validator – a Password Strength Validator

Lecture 12: How to write a Custom Form Field Validator Function

Lecture 13: Implementing a Custom Form Field Validation Directive

Lecture 14: Multiple error messages per form field – Understanding the problem

Lecture 15: The onlyOneError Custom Pipe – API Design

Lecture 16: The onlyOneError Custom Pipe – Step-by-Step Implementation

Chapter 3: Introduction to Angular Reactive Forms

Lecture 1: Introduction to Angular Reactive Forms

Lecture 2: Introduction to Reactive Forms – Step-by-Step Example

Lecture 3: Reactive Forms – The Form Control Directive and Custom Validators

Lecture 4: The Form Builder API – Writing much more concise Reactive Forms

Lecture 5: Comparing Reactive and Template Driven Forms

Lecture 6: Angular Strictly Typed Forms

Lecture 7: Non Nullable Form Builder

Chapter 4: Angular Reactive Forms In Depth

Lecture 1: New Section – Advanced Reactive Forms

Lecture 2: Building an Angular Multi-Step Reactive Form with Angular Material

Lecture 3: Angular Asynchronous Form Validators

Lecture 4: Angular Forms Controls – How to add a DatePicker field to a Reactive Form

Lecture 5: Angular Form Controls – Checkbox and Text Area

Lecture 6: Angular Selection Dropdown Form Control – Step-by-Step Example

Lecture 7: Multi-Step Forms – Displaying an Error Message per Step

Lecture 8: Reactive Forms – Dynamically Enabling and Disabling Form Fields

Lecture 9: Angular Material Date Range Selector – Step-by-Step Example

Lecture 10: Reactive Forms Multi-field Custom Validation

Lecture 11: How to implement Form Draft Pre-Save using the valueChanges Observable API

Chapter 5: Angular Custom Form Controls

Lecture 1: New Section – Angular Custom Form Controls – a File Upload Component

Lecture 2: Custom File Upload Component – Step-by-Step Implementation

Lecture 3: Angular File Upload – Opening a File Upload Dialog

Lecture 4: Angular File Upload – Uploading to a Node Server using the HTTP Client

Lecture 5: Implementing a File Upload Progress Indicator

Lecture 6: Understanding the Angular Forms ControlValueAccessor Interface

Lecture 7: ControlValueAccessor Interface – Step-by-Step Implementation

Lecture 8: ControlValueAccessor – Setting Up DI Configuration and Demo

Lecture 9: Angular Custom Form Controls – The Validator Interface

Lecture 10: What is a Reusable Nested Form?

Lecture 11: How to Use ControlValueAccessor to implement a Nested Form

Chapter 6: Form Arrays In Depth

Lecture 1: New Section – Setting Up Step 3 of our Multi-step Form

Lecture 2: Preparing Step 3 of our Multi-Step Form

Lecture 3: Angular Form Arrays – Step-by-Step Example

Lecture 4: Angular Multi-Step Form – Final Demo

Chapter 7: Conclusion

Lecture 1: Bonus Lecture (Updated August 2024)

Lecture 2: Angular Forms In Depth – Conclusions & Key Takeaways

Instructors

Angular University
Best Selling Angular Courses | 200k+ students | 17 courses

Rating Distribution

1 stars: 19 votes

2 stars: 19 votes

3 stars: 152 votes

4 stars: 678 votes

5 stars: 1189 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!