Angular Forms In Depth (Angular 17)

Focused View

Angular University

6:45:37

26 View

1 - Introduction

1 - Angular Forms In Depth Helicopter View.mp4

04:36

2 - IMPORTANT.html

3 - Angular Forms In Depth Development Environment Setup.mp4

07:30

4 - Introduction to Angular Forms why do we need a Forms module.mp4

07:15

5 - Introduction to Angular Material Form Controls.mp4

06:18

2 - Template Driven Forms In Depth

6 - Introduction to Template Driven Forms.mp4

08:05

7 - Understanding how the Angular ngModel Directive Works.mp4

09:33

8 - Introduction to Form Validation.mp4

04:57

9 - Understanding Angular Forms CSS State Classes.mp4

12:48

10 - How to Display Error Messages in an Angular Form.mp4

05:51

11 - Learn All the Built.mp4

09:11

12 - How to use ngSubmit.mp4

05:39

13 - Advanced ngModel.mp4

08:42

14 - Advanced ngModel.mp4

06:28

15 - Understanding ngModel One Way and Bidirectional Data Binding.mp4

09:05

16 - Template Driven Forms Custom Field Validator.mp4

04:34

17 - How to write a Custom Form Field Validator Function.mp4

05:23

18 - Implementing a Custom Form Field Validation Directive.mp4

10:33

19 - Multiple error messages per form field.mp4

05:29

20 - The onlyOneError Custom Pipe.mp4

05:31

21 - The onlyOneError Custom Pipe.mp4

11:51

3 - Introduction to Angular Reactive Forms

22 - Introduction to Angular Reactive Forms.mp4

05:30

23 - Introduction to Reactive Forms.mp4

10:58

24 - Reactive Forms.mp4

07:52

25 - The Form Builder API.mp4

06:38

26 - Comparing Reactive and Template Driven Forms.mp4

11:14

27 - Angular Strictly Typed Forms.mp4

04:35

28 - Non Nullable Form Builder.mp4

07:06

4 - Angular Reactive Forms In Depth

29 - New Section.mp4

09:09

30 - Building an Angular Multi.mp4

06:05

31 - Angular Asynchronous Form Validators.mp4

10:34

32 - Angular Forms Controls.mp4

04:43

33 - Angular Form Controls.mp4

11:15

34 - Angular Selection Dropdown Form Control.mp4

06:03

35 - Multi.mp4

07:20

36 - Reactive Forms.mp4

07:08

37 - Angular Material Date Range Selector.mp4

06:08

38 - Reactive Forms Multi.mp4

09:48

39 - How to implement Form Draft Pre.mp4

07:49

5 - Angular Custom Form Controls

40 - New Section.mp4

05:02

41 - Custom File Upload Component.mp4

05:13

42 - Angular File Upload.mp4

06:11

43 - Angular File Upload.mp4

07:16

44 - Implementing a File Upload Progress Indicator.mp4

07:06

45 - Understanding the Angular Forms ControlValueAccessor Interface.mp4

07:35

46 - ControlValueAccessor Interface.mp4

09:18

47 - ControlValueAccessor.mp4

05:23

48 - Angular Custom Form Controls.mp4

09:41

49 - What is a Reusable Nested Form.mp4

06:13

50 - How to Use ControlValueAccessor to implement a Nested Form.mp4

11:14

6 - Form Arrays In Depth

51 - New Section.mp4

07:01

52 - Preparing Step 3 of our Multi.mp4

05:14

53 - Angular Form Arrays.mp4

11:32

54 - Angular Multi.mp4

07:56

7 - Conclusion

55 - Bonus Lecture.html

56 - Angular Forms In Depth.mp4

04:28

Description

Build complex enterprise data forms with the powerful Angular 17 Forms module

What You'll 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 is this for?

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

What You Need to Know?

Some base knowledge of Angular and Typescript is all that is needed

More details

Description
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!

Who this course is for:
Angular Developers, trying to Learn in Depth everything about Angular Forms

User Reviews

Rating

average 0

Total votes0

Focused display

Angular

Angular University

Instructor's Courses

Hello, I'm Vasco Cavalheiro and I'm an online instructor at the Angular University.Over the years I have helped over 100k developers to learn the Angular framework and its surrounding ecosystem of technologies.Check out my Linkedin in the links section on the top right.About the Angular University:The Angular University aims to be the one place that you go in order to learn and keep up with the whole Angular ecosystem. We provide premium quality video tutorials, screencast style.No matter if you are a beginner, intermediate or advanced in Angular, we have several courses for you.More about me:I'm a Software Developer with many years of experience, very seasoned building user interfaces with Angular. I've worked as a Frontend Developer/Architect in a large variety of enterprise projects throughout the years. I worked on a ton of projects, everything from single page applications to help build the European Criminal Record Information Exchange System, to brand new e-banking portals, to corporate banking portals, and more. I've been a key part of internal framework teams that built frameworks for in-house departments of tens of developers. I also love to teach, write and talk about technology. I am looking forward to be your Angular instructor,Kind Regards,Vasco

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.