Lompat ke konten Lompat ke sidebar Lompat ke footer

Angular Forms In Depth


Angular Forms In Depth - 
Build complex enterprise data forms with the powerful Angular 12 Forms module

Preview this course GET COUPON CODE

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

100% Off Udemy Coupon . Free Udemy Courses . Online Classes

Posting Komentar untuk "Angular Forms In Depth"