Features
Features:

Product Tour >

Edraw AI >

Paid Plans:

Individuals >

Business >

Eduaction >
Resources
Blog

History

How-tos & Tips

Discovery

Biography

Business Analysis

Examples

AI concept Map

Free AI Mind Map Generator

Onenote Mind Map

Bcg Matrix Examples

Nike Marketing Strategy

Unilever SWOT Analysis

Make Mind Maps in Google Docs

Guide

FAQs

What's New

Resource Center
Templates
All Templates

Brain Storming Templates

Strategy and Planning Templates

Project Management Templates

Product Management Templates

Human Resources Templates

Agile Workflow Templates

Marketing Templates

Education Templates

Fun and Games Templates

User Gallery
Download
Pricing
Enterprise

MindMap Gallery Angular Forms

Angular Forms

Angular forms in depth: Template driven, Reactive Forms & difference b/w TDF & RF

Edited at 2022-09-16 08:33:14

Karan Gupta

Recent works View more works>>

Angular Forms

Karan Gupta

Recent works View more works>>

Recommended to you
Outline

Angular Forms

Template Driven Forms

Reactive Forms

How Reactive Forms Work Internally?

Abstract Control(Model Layer)

Definition

1. AbstractControl is an abstract class which contains shared logic for:

1. Running Validator and Keeping track of Validation Status

2. Checking and Calculating UI Status like markAsDirty(), markAsTouched(), touched, pristine,dirty etc.

3. Resetting UI Status

FormControl, FormGroup and FormArray extends this AbstactControl Class

Extended By

Form Control

Definition

1. Form Control can only be put with one Dom Element be it with Input (Native Html Element) or Custom Component (with the help of Control Value Accessor)

2.Form Control can also work stand alone, if it is not a part of any FormGroup or FormArray and its validation status wont affect anyone else

Form Group

Definition

1. Form Group are kind of Container where we can group multiple formcontrol elements, formarray and formgroup too.

2. The validation status of the form group depends on the child controls and also on themseleves if we have defined any Validator on FormGroup itself .

Form Array

Defintion

1. Form Array also acts as Container can be used to group multiple form Controls.

AbstractControlDirective(Middleman)

Definition

1. Base class for form control based directives(NgModel, FormControlName, FormControlDirective and contains boolean getters that reflect status of bound control(valid,, touched,dirty)

2. This can be thought of as MiddleMan that Connects ControlValueAccessor (View Layer) with AbstractControl (Model Layer)

Extended By

NgModel

FormControlName

FormControlDirective

ControlValueAccessor And AbstractControl Communication

ControlValueAccessor uses AbstractControlDirective(FormControlName) to communicate with AbstractControl (FormControl)

ControlValueAccessor(View Layer)

Definition

ControlValueAccessor (View Layer) keeps track of Dom Element and is responsible for communicating with (Model Layer) FormControl.

Its job is to connect a DOM element(eg: <input>, <textarea>) or a custom component(eg: <app-custom-input>) with an AbstractControlDirective(eg:NgModel, FormControlName). AbstractControlDirective will eventually become a bridge between ControlValueAccessor(view layer) and AbstractControl(model layer). This way, the 2 layers can interact with each other.

If we want to use our custom component with in Angular Forms be it Reactive or Template Driven Forms then That Component Should Implement ControlValueAccessor Interface. Because Angular Forms needs some way of communicating with our custom component.

https://blog.angular-university.io/angular-custom-form-controls/

export interface ControlValueAccessor { writeValue(obj: any): void; registerOnChange(fn: any): void; registerOnTouched(fn: any): void; setDisabledState?(isDisabled: boolean): void;}

Some Points

Sub Topic

ControlValueAccessor & Validators

Reference Link

https://blog.angular-university.io/angular-custom-form-controls/

check registerOnValidatorChange

Optimizations

UpdateOn

Options Available

change

blur

submit

Use Case

By default, Angular performs the control validation for every keystroke. as updateOn is set to 'change'

This can be problematic for forms with heavy validation process.

Therefore, we can set it to blur or submit. When using blur if user entered nothing and blur event happens then angular wont update the model

Where we can use it?

We can use this at a form level as well as Control Level. Very Useful when we have async validators which involves http requests!

onlySelf

Angular Checks the Validation Status of the whole form whenever there is change in the vallue

The validation starts from the control whose value was changed and propagates to the top level FormGroup. This is the default behavior

When using setValue and patchValue to update the control value , if we just want to check the current control validity and don't want to validate the whole form then we can set {onlySelf:true}. Angular will only check the current control validity and will not propogate to Parent Form Group. And FOR THIS TO WORK CALL setValue & PatchValue on Control not on form :).

emitEvent

The Angular forms emit two events. One is ValueChanges & the other one is StatusChanges. The ValueChanges event is emitted whenever the value of the form is changed. The StatusChanges event is emitted whenever angular calculates the validation status of the Form. This is the default behaviorWe can stop that from happening, by setting the emitEvent=false

this.myForm.controls?.['name'].setValue('Sanjay',{onlySelf:true,emitEvent:false});

FormBuilder API

Form Reset & Form Disable/Enable APIS

CSS Classes

ng-untouched | ng-touched

Changes from untouched to touched when focus goes in & out of the control !

ng-pristine | ng-dirty

Changes when we actually change the value from UI.

ng-invalid | ng-valid

Depends upon Validators & value for that

Custom Validators

Sync

Async

https://github.com/sgarg5858/forms-in-angular/tree/8-async-validator-loading-ui-effect-in-form/src

We can also show loading indicator while our form runs async validators!

Cross Field Validation

Apply the validator on the form to get access to multiple controls inside validator

Useful in checking like both passwords are same! password & confirm-password

Start Date & End Date Some Logic Validation

Study from TekTutorialsHub

Add Control Methods

Disable Control Directive

https://netbasal.com/disabling-form-controls-when-working-with-reactive-forms-in-angular-549dd7b42110

Difference b/w TDF & RF

Template Driven Forms

Suitable for simple scenarios and fails for complex scenarios

Two way data binding(using [(NgModel)] syntax)

Automatic track of the form and its data(handled by Angular)

Unit testing is another challenge

Reactive Forms

Handles any complex scenarios

No data binding is done (immutable data model preferred by most developers)

Reactive transformations can be made possible such as

Handling a event based on a debounce time

Handling events when the components are distinct until changed

Adding elements dynamically

Easier unit testing