Forem: Sandip Malaviya

N Level Form Array with Dynamically Validation in Angular

Sandip Malaviya — Fri, 08 Apr 2022 06:12:15 +0000

In this tutorial article, we will cover the form with multiple sub-form (nested form) along with each sub-form have custom validation in Angular.

Problem Statement

Create a form with N number of sub-forms, each with N number of listed items, and submit the entire form at once, with specific validation in each form/form array.

Use Case

Let’s say, you had to create a gateway for Family Information that included basic information as well as various Address Details, Income Details, Expense Details, Education Details, Sickness Details, and so on. Furthermore, each family has several family members, and each family member has various education, spending, and income statistics. All forms contain N details and distinct fields, as well as dynamic validation when data is entered.

Prerequisites

Prior knowledge of TypeScript
Prior knowledge of JavaScript
Visual studio code
A development machine with Node 10+ & NPM 5.5.1+ installed

Create N Level FormArray with Reactive Form Validation in Angular: Step by Step Tutorial

Step 1: Create New Angular Project

Import the ReactiveFormsModule and FormsModule in app.module.ts Also, add it to the imports array of NgModule of the AppModule

import { FormsModule, ReactiveFormsModule } from '@angular/forms';

Step 2: App.component.ts

Now, Create a simple form first in app.component.ts and import the below the line and add a new form something like this with validation

import { FormArray,FormBuilder,FormControl,FormGroup,Validators } from '@angular/forms';

Step 3: App.component.html

App.component.html should look like this with a validation message message

Run the command: npm start and open the browser localhost:4200/ - it will look like this and validation should fire on the touch that textbox or press submit button

Step 4: Form-Array

Let’s move toward the FormArray, and try to add the first array assume we have to add the “Education Details” list.
Add new member in form declaration part like this

educationdata: 
this.fb.array([])

Step 5: Declare FormArray Function Like This

educationdata(): FormArray {
    return this.myForm.get('educationdata') as FormArray;
  }

Step 6: Create A New Form Like This

neweducationdata(): FormGroup {
    return this.fb.group({
      schoolName: new FormControl(''),
      degree: new FormControl(''),
      fieldofstudy: new FormControl(''),
      startDt: new FormControl(''),
      endDt: new FormControl(''),
      grade: new FormControl(''),
      notes: new FormControl(''),
      attachmenturl: new FormControl(''),
    });
  }

Step 7: Add New Array Function

educationcon(index) {
    this.educationList = this.myForm.get('educationdata') as FormArray;
    const formGroup = this.educationList.controls[index] as FormGroup;
    return formGroup;
  }

Step 8: Remove New Array Function

removeeducationdata(i: number) {
    this.educationdata().removeAt(i);
  }

Step 9: Add Validation Management Like This

educationcon(index) {
 this.educationList = this.myForm.get('educationdata') as FormArray; const formGroup = this.educationList.controls[index] as FormGroup;
    return formGroup;
}

Ts code should look like this

The HTML code should be like this

<table
   class="table table-bordered"
   formArrayName="educationdata"
   >
   <tr>
      <th colspan="7">Add More Data:</th>
      <th width="150px">
         <button
            type="button"
            (click)="addeducationdata()"
            class="btn btn-primary"
            >
         Add More
         </button>
      </th>
   </tr>
   <tr
   *ngFor="let f of educationdata().controls; let i = index"
   [formGroupName]="i"
   >
   <td>
      School/College Name :
      <input
         type="text"
         formControlName="schoolName"
         class="form-control"
         />
   </td>
   <td>
      Degree:
      <select formControlName="degree" class="form-control">
         <option value="">Select Degree</option>
         <option value="SCHOOL">School Degree</option>
         <option value="COLLEGE">Some College</option>
         <option value="BACHELOR">Bachelor Degree</option>
         <option value="MASTER">Master Degree</option>
         <option value="PHD">PhD Degree</option>
      </select>
   </td>
   <td>
      Field Of Study:
      <input
         class="form-control"
         type="text"
         formControlName="fieldofstudy"
         />
   </td>
   <td>
      Start Date:
      <input
         class="form-control"
         type="date"
         formControlName="startDt"
         />
   </td>
   <td>
      End Date:
      <input
         class="form-control"
         type="date"
         formControlName="endDt"
         />
   </td>
   <td>
      Grade:
      <input
         class="form-control"
         type="text"
         formControlName="grade"
         />
   </td>
   <td>
      Notes:
      <textarea
         class="form-control"
         formControlName="notes"
         ></textarea>
   </td>
   <td>
      <button
         (click)="removeeducationdata(i)"
         class="btn btn-danger"
         >
      Remove
      </button>
   </td>
   </tr>
</table>

When you run the project the UI will look like this, I have used a tab (bootstrap tab), you can add N number of an array and remove any specific array.

Now Let’s Add Validation In The Nested Array

Step 1: Add A Display Message Like This

validation_edumessage = {
    schoolName: [{ type: 'required', message: 'School Name is required' }],
    degree: [{ type: 'required', message: 'Degree is required' }],
    startDt: [{ type: 'required', message: 'Start Date is required' }]};

Step 2: Add Validation In Education From The Group

neweducationdata(): FormGroup {
    return this.fb.group({
      schoolName: new FormControl('', [Validators.required]),
      degree: new FormControl('', [Validators.required]),
      fieldofstudy: new FormControl(''),
      startDt: new FormControl('', [Validators.required]),
      endDt: new FormControl(''),
      grade: new FormControl(''),
      notes: new FormControl('')}); }

Step 3: Add Validation In Form Html Like This

<input type="text" formControlName="schoolName"
   class="form-control" 
   [ngClass]="{'is-invalid':
    educationcon(i).controls['schoolName'].errors &&
    (educationcon(i).controls['schoolName'].dirty ||                        educationcon(i).controls['schoolName'].touched)}"/>

  <div *ngFor="let validation of validation_edumessage.schoolName"
   class="invalid-feedback">
   <div  *ngIf="educationcon(i).controls['schoolName'].hasError(validation.type) 
&& (educationcon(i).controls['schoolName'].dirty || educationcon(i).controls['schoolName'].touched)">
 </div> </div>

UI should look like this:

When you submit a form we will get all data like this (capture from console)

Over To You!

Looking for a Sample Source Code? Here you go: GITHUB.

That’s it for now. Today you have learned how to create N Level FormArray With Reactive Form Validation using Angular.

At last, If you’re dealing with large-scale applications or enterprise software, it is beneficial to take experts’ help. If you’re looking for an expert helping hand, contact Samarpan Infotech and hire Angular developers with having minimum of 5+ years of experience working on enterprise software.

Monitor Real-time Consolelogs from action on HTML page using Socket.io

Sandip Malaviya — Fri, 24 Apr 2020 08:59:49 +0000

When we need to get a real-time response in our IOS APP, we often use Node.js to resolve this problem. and generally, we are using a console log to debug or check the output at the backend. But these things are only can be helpful when we run a project at the localhost.

Now, what if we need to check logs or error after uploading at the server. We get logs from servers and check logs one by one to sort out. But this solution takes a huge amount of time.

Is there any way to short it out in less amount of time?

YES, you are at the right place, In this blog, we will see how can we print or display console log real-time in HTML page so we can see logs easily. Here is

Step-by-step solution Print / Display Console Log real-time in HTML page

Step 1: Create New Project and Declare or assign basic or important variables

Firstly we need to create a sample node.js project and then we need to create some sample functions to print of debug logs in the typescript page.

Here we are using Index.ts . And for output or display logs we are going to use Index.HTML. So let’s start the project.

New Nodejs Project creation

So as per snippet, first we need to declare or assign basic or important variables for a project, and now we are rapidly moving on logic for display real-time logs,

Step 2: Logic for (display) Logs in Index.ts

Logic for display Logs in Index.ts

As per code snippet, we need to create a new function and then it will call every time when console.log is executed and it will pass the message as a data parameter.

It will call eventEmitter which will be call logging function and which will pass as log message to HTML page so quickly we now we look at HTML page for better explanations.

Step 3: Display logic in HTML page

Display logic in HTML page

So as per the above snippet; listener method "log_messege" getting called from index.ts page every time when ‘logging’ function called. It will pass data as msg parameter and it will append in HTML element as text format.

Next, we move on to example for better explanations.

Step 4: Create Sample project and create functions

For example, we are going to create functions in the typescript page and put logs inside in the function. so check out next snippet,

Create Sample project and functions in typescript page

Whenever connection established then "connection" will be called and a log will be executed and it will print. After that, we create new function FirstFunction and whenever it calls it will execute console.log,

Now, we are going to create more functions so we can be more clear about this functionality so please check out next snippet,

Step 5: Create sample functions in HTML page and design button to create event

As per function ‘FirstFunction ’ function, ‘SecondFunction’ and ‘ThirdFunction’ will work same but log message is different.

Now we quickly move on HTML page to use these functions,

create sample functions in HTML page

We create a function in the HTML page for a call. These listener methods in HTML page and gave name ‘First’, ’Second’, ’Third’.

Now, we will design HTML element button to execute this function's runtime,

design button to create event

You can see we also design "ul" in this page also, So using this "ul" we will print logs on the screen. And we call functions onClick event of the button, we will watch log_message method again so we can be more clear as we do it in Step 3.

Display logic in List View on HTML page

Now, log message will append as list in the screen so we can see logs; all logs one by one. Next, we are going to run a project and let see this method is working or not.

Step 6: Execute project and check output

execute project and check first output

We can see there is some text on a screen. That is a log message which we put in the "Connection" method and we also discussed that it will execute when connection established so following is the output of this.

execute project and check first function output

Now, we are going to call first function and let see log is print real time in screen or not.

calling first function to check output printed on HTML Page

At last, we can see log message successfully print on screen real time for first method. Following, we click on second or third function and let see its work fine or not.

check final project all function print console logs output

From the above screenshot, we can see it is working fine and we are getting logs real-time on a screen for all methods. Hope you can understand functionality properly.

Thank You. That’s it for now. Stay Connected for more tutorials, until than Happy Coding…

We're always happy to assist you to turn your business development ideas into beautiful reality; you can hire our node.js developers for further assistance with easy hiring model.

Angular: Create Custom Dynamic Loader OR Spinner on HTML Element

Sandip Malaviya — Fri, 21 Feb 2020 10:30:13 +0000

In this article, we’ll learn how we can show loader or spinner on a specific element of an HTML form using Angular 8.

Prerequisites:

Prior knowledge of TypeScript.
Prior knowledge of JavaScript.
Visual studio code.
A development machine with Node 8.9+ & NPM 5.5.1+ installed.

Step 1: Installing Angular CLI 8

In the First step, we’ll have to install the latest version of Angular CLI using below command.

$ npm install -g @angular/cli

Step 2: Creating your Angular 8 Project

In this second step, we will use Angular CLI to start our Angular Project.

Go to CMD or Terminal and use below command:

$ ng new custom-loader

This CLI will ask you “whether you would like to add Angular routing”: Say Yes.

It will ask “which stylesheet format you would like to use”. Choose CSS.

Now your project is ready Angular CLI will generate required files and folders along with NPM packages and routing too.

After that, open your project in Visual studio code and go to your root folder and run the local development server using below command:

$ npm start

Angular 8 Project Creation Process

Now run localhost:4200/ in your browser.

Step 3: Add Custom JS and Image of loader

Now add JS and image folder inside of assets folder of project.
Add JavaScript file inside JS folder with name “custom.js”
Add any of your loader image inside image folder with name “loader.gif”.
Add jquery & custom.js in angular.json folder of your project.

Code Snippet of Add Custom JS and Image of loader Step

After executing above steps,

Open your custom js file and copy this below code

function loadingServiceShow(zindex, id, flag) {
    try {
        var _id = $("[data-loader=" + id + "]");
        _id.CenterLoader(zindex, id, flag);
    } catch (error) {
        loadingServiceHide(id);
    }
}
$.fn.CenterLoader = function (zindex, id, flag) {
    var height = $(this).outerHeight() + "px";
    var width = $(this).outerWidth() + "px";
    var top = $(this).offset().top;
    var left = $(this).offset().left;
    var loadingContainer = "body";
    if (flag == true) {
        top = 0;
        left = 0;
        loadingContainer = this;
    }
    var centerTop = Math.max(0, (($(this).outerHeight() / 2) - 7)) + "px";
    var centerLeft = Math.max(0, (($(this).outerWidth() / 2) - 7)) + "px";

    var loadingContain;
    if (id === "" || id === null || id === undefined) {
        id = "loader-image";
    } else {
        var _loadIdAppend = id
        id = id + "_Loader";
    }
    loadingContain = "<div style='position:absolute;height:" + height + ";width:" + width + ";background:#ccc;z-index:" + zindex + ";top:" + top + "px;left:" + left + "px;opacity:0.7' id='" + id + "' class='loader-image'><div style='position:absolute;top:" + centerTop + ";left:" + centerLeft + ";color:white;height: 28px;width: 28px;background: transparent url(assets/image/loader.gif) no-repeat scroll 0 0;' class='loader-style'></div></div>";
    if (flag == true) {
        loadingContain = "<div style='position:fixed;height:100%;width:100%;background:#ccc;z-index:" + zindex + ";top:0;left:0;opacity:0.7;'id='" + id + "' class='loader-image'><div style='position:absolute;top:49%;left:49%;color:white;height: 28px;width: 28px;background: transparent url(assets/image/loader.gif) no-repeat scroll 0 0;'class='loader-style'></div></div>"
    }
    $("body").append(loadingContain);
}
function loadingServiceHide(id) {
    if (id === "" || id === null || id === undefined) {
        $(".loader-image").remove();
    } else {
        $("#" + id + "_Loader").remove();
    }
}

Step 4: How to use Custom.js to make Call Custom Dynamic Loader

Open app.component.html page and add any HTML component like

Adding HTML Component

Must add data attribute data-loader="Unique Identity"

Next, Open relevant component.ts file and declare JavaScript function above @component

Declaring JavaScript Function

Step 5: How to Start Loader on a specific Element

For loading start, you have to add this line (For full-screen loader you just have to pass “true” in the last argument)

For Specific element -

loadingServiceShow(1, 'loginbtnadd', false);

For Full screen -

loadingServiceShow(1, 'loginbtnadd', true);

Now let me show you how to use that function in ts code file

ts code file

Step 6: How to Stop loader from specific Element

For stop you have to add this below line of command:

loadingServiceHide('loginbtnadd');

Output as Below

Angular Custom Dynamic Loader/Spinner on HTML elements Demo

Over to YOU!

Looking for a Sample Source Code? Here you go: GITHUB.

Today you have learn how to create custom dynamic loader on HTML Element using Angular 8. If you have queries about tutorial, please ask our Angular Expert via GitHub Profile.

Related Resources:

How to Load Dynamic HTML Div Content In Angular Tutorial with Source Code

That's it for now. Stay Connected for more tutorials, until than Happy Coding...

Solution for Angular IE Error: Uncaught (in promise) Loading chunk

Sandip Malaviya — Wed, 12 Feb 2020 13:49:11 +0000

In this article, angular developer will learn the most common error's solution which is: "Uncaught (in promise) Loading chunk" Angular & IE. Developer is facing this error while working with angular and IE browser, Yes App is running fine with chrome & another browser but not in internet explorer.

#2 Step to solve Internet explorer & Angular Error: Uncaught (in promise): Loading chunk

After researching some hours; we finally found solution and that issue about promise((t,n)=>, promise keyword does not supporting in IE.

STEP 1: Open the src/polyfills.ts file, and uncomment below code

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';

lambda expression does not support in IE so we can replace with code function() instead of this expression.

STEP 2: Install some packages as below

npm install --save web-animations-js
npm install --save classlist.js

Then We found promise issue from one of the npm package (fuctbase64/index.js)

module.exports = function (event) {
  return new Promise((resolve, reject) => {
    let reader = new FileReader();
    let files = event.target.files;
    let len = files.length;
    if (len > 1) {
      reject(new DOMException("Only one file can be uploaded at a time"));
    } else {
      reader.onerror = () => {
        reader.abort();
        reject(new DOMException("Problem parsing input file."));
      };
      let file = files[0]
      reader.onload = (evt) => {
        const uint = new Uint8Array(evt.target.result);
        let bytes = [];
        uint.map(byte => {
          bytes.push(byte.toString(16));
        });
        const hex = bytes.join('').toUpperCase();
        let base64 = reader.result.split(',')[1];
        file.base64 = base64;
        file.binaryFileType = getMimetype(hex);
        resolve(file);
      };
      reader.readAsDataURL(file);
    }
  });
}

Replace code with

module.exports = function (event) {
  return new Promise(function(resolve, reject)  {
    let reader = new FileReader();
    let files = event.target.files;
    let len = files.length;
    if (len > 1) {
      reject(new DOMException("Only one file can be uploaded at a time"));
    } else {
      reader.onerror = function() {
        reader.abort();
        reject(new DOMException("Problem parsing input file."));
      };
      let file = files[0]
      reader.onload = function(evt){
        const uint = new Uint8Array(evt.target.result);
        let bytes = [];
        uint.map(function(byte) {
          bytes.push(byte.toString(16));
        });
        const hex = bytes.join('').toUpperCase();
        let base64 = reader.result.split(',')[1];
        file.base64 = base64;
        file.binaryFileType = getMimetype(hex);
        resolve(file);
      };
      reader.readAsDataURL(file);
    }
  });
}

Over To You!

Check out full StackOverFlow thread for more details about solution.