MindMap Gallery Angular Forms
Angular forms in depth: Template driven, Reactive Forms & difference b/w TDF & RF
Edited at 2022-09-16 08:33:14A mind map about Directives Mindmap.
In Angular, DOM manipulations are typically handled through the framework's templating and data binding features, as well as through direct access to the DOM using ElementRef and Renderer2. When it comes to directly manipulating the DOM in a web application, there are several important considerations and best practices to keep in mind. Here's an overview of DOM manipulationsin Angular.
Angular forms in depth: Template driven, Reactive Forms & difference b/w TDF & RF
A mind map about Directives Mindmap.
In Angular, DOM manipulations are typically handled through the framework's templating and data binding features, as well as through direct access to the DOM using ElementRef and Renderer2. When it comes to directly manipulating the DOM in a web application, there are several important considerations and best practices to keep in mind. Here's an overview of DOM manipulationsin Angular.
Angular forms in depth: Template driven, Reactive Forms & difference b/w TDF & RF
Angular Forms
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
Sub Topic
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