Angular Reactive form Validations

Validating input in reactive forms

Validator functions
Validator functions can be either synchronous or asynchronous.

Sync validators: Synchronous functions that take a control instance and immediately return either a set of validation errors or null. You can pass these in as the second argument when you instantiate a FormControl.

Async validators: Asynchronous functions that take a control instance and return a Promise or Observable that later emits a set of validation errors or null. You can pass these in as the third argument when you instantiate a FormControl.

Continue reading “Angular Reactive form Validations”

Javascript Hoisting

In JavaScript, Hoisting is the default behavior of moving all the declarations at the top of the scope before code execution. Basically, it gives us an advantage that no matter where functions and variables are declared, they are moved to the top of their scope regardless of whether their scope is global or local.
It allows us to call functions before even writing them in our code.

Note: JavaScript only hoists declarations, not the initialisations.

Example1: Function Hoisting
alert(Sum(5, 5)); // 10
function Sum(val1, val2){
  return val1 + val2;
}
Example2: Function Hoisting
Add(5, 5); // error
var Add = function Sum(val1, val2){
  return val1 + val2;
}
Example3: Function Hoisting
alert(UseMe);
var UseMe;
function UseMe(){
  alert("UseMe function called");
}

Angular 7 -Reactive Forms Validation

<label class="label-control">Username*</label>
<input type="text" autocomplete="new-password" formControlName="username" class="form-control" (blur)="verifyUsername($event.target.value)" minlength="1" maxlength="20">
<div *ngIf="editAuthenticationform.controls['username'].invalid && (editAuthenticationform.controls['username'].dirty || editAuthenticationform.controls['username'].touched)" class="error formError">
<div *ngIf="editAuthenticationform.controls['username'].errors.required">Username is required.</div></div>
Continue reading “Angular 7 -Reactive Forms Validation”

Real DOM and Virtual DOM.

First of all – the Virtual DOM was not invented by React, but React uses it and provides it for free.

A virtual DOM is a lightweight JavaScript object which originally is just a copy of the real DOM. It is a node tree that lists the elements, their attributes, and content as Objects and their properties.

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction

Continue reading “Real DOM and Virtual DOM.”

let and const

The main difference is the scoping rules. Variables declared by var keyword is scoped to the immediate function body (hence the function scope) while let variables are scoped to the immediate enclosing block denoted by { } (hence the block scope).

ES6 Classes

A class is a type of function, but instead of using the keyword function to initiate it, we use the keyword class, and the properties are assigned inside a constructor() method.

There are three concepts in Object-Oriented Programming ObjectClass and Methods. The ES6 JavaScript supports the Object-Oriented programming components.

  • Object: A real-time object entity means the presentation of any entity in real-time.
  • Class: It is before the plan of creating any objects which are known as the blueprint of any objects which you want to create.
  • Methods: It communicates between the objects
Example

What is vue

Vue  is a progressive frontend javascript framework for building user interfaces. ​The core library is focused on the view layer only​Vue.js resembles React more than Angular which is a complete framework.​