Dynamically Update Form Control Required Validation in Angular Reactive Forms

Form Validation in Angular applications plays a very important role to provide a good and smooth user experience. In some situations, we may need to dynamically handle or adjust the validation rules for form controls as the user starts filling out the sections.

In this guide, we will discuss the process of how to set and reset the required validation on Angular form controls by using the Reactive approach. We will create a simple yet useful example to demonstrate the dynamic control validation riles within the Angular Reactive forms.

Read more

Angular 15 Reactive Forms Dynamic Checkbox List Tutorial Example

In this tutorial, we will get to know how to implement a dynamic checkbox list in Angular. We will explain step by step implementation of this topic.

Sometimes, we have to choose multiple items from an array. At that time, we use a checkbox. This item lists dynamically and the user can choose the required option by using the checkbox. In this tutorial, we will learn through an example the step-by-step implementation of dynamic checkbox lists by using reactive forms in the Angular app.

Read more

Login & Signup Screen Template with Bootstrap in React

Friends, as we know that login system allows the user to gain access to any software system securely. Sign Up is the process that enables the user to register in any web and mobile app.

So, in this tutorial, we will get to know how can we create an attractive login and user registration template for a React app. We will do this by using the Bootstrap 4 front-end framework to build this react login system.

If you are a novice in creating React apps, then just don’t worry. This guide will make you learn the same while starting from scratch.

Read more

Angular 15 Get Value from Disabled Form Control while Submitting

In an Angular Form, we may sometimes be required to disable some of the form controls based on complex logic. When we make a form control is disabled, it is not considered as the value during submission of the forms.

The form control values are only fetched from controls that are enabled on the time of submission, whereas the disabled form control values are simply ignored.

In this quick tutorial, we’ll create a simple Angular form and get the value of disabled form control while submitting it.

Read more

Resolved! | ReferenceError: primordials is not defined

While working with npm commands, we generally face many heads shaking problems. many of them are resolved in seconds but some can ruin your days to resolve.

One of the similar issues we’re going to discuss in this post. I faced this NPM issue while working on an Angular project. I will share how and when this issue appeared and how to resolve this in seconds.

Read more

Validate Phone Number in an Angular Reactive Form

In this tutorial, we will learn to validate a 10-digit phone/mobile number in an Angular 11/12 app. We will use Reactive Form for this. We will surely get to know about implementing phone/mobile number validation in simple and easy steps. How to Validate Phone/Mobile Number using Reactive Form in Angular See the below steps for … Read more

Angular | How to Move/ Copy Folder/Files During Project Build Process

In this post, we’ll quickly discuss how to move or copy a resource like the dist folder or some files from/to the assets folder to some other target folder.

During the build process in the Angular project where we simply run the $ ng build or $ npm run build command to create the distributable source code of the application in a dist folder.

In situations we may need to put or copy the dist folder from its location to some other project directory or location but only after the build process is successfully completed. This method is used to copy the files folder after the build process is completed.

Read more

Learn To Create React Modal Popup With material UI

Modals are the widely used component in React-based web and mobile apps. A Modal Popup provides a simple solution to user interface-related problems. A Modal window covers the entire screen and is useful in displaying relevant information to the users. The other names given to the Modals are Overlays, Dialogs, etc. It constitutes a convention … Read more

Angular | OAuth2 or Open ID Connect using angular-oauth2-oidc Tutorial with Example Application

In this Angular tutorial, we’ll discuss How to implement the OAuth2 or Open ID Connect Authentication (OIDC) feature using the angular-oauth2-oidc package module in the Angular application.

The angular-oauth2-oidc is a very popular and widely used Angular package to implement the OAuth2 protocol-based authentication. It supports many configurations to easily modify the current flow or use default ones for a quick start.

We’ll also discuss some of the common issues/ challenges faced during the implementation of the OAuth2 / oidc protocol for authentication in Angular application using the angular-oauth2-oidc package module.

Let’s quickly start the implementation…

We have already created a new Angular application named angular-oauth2-demoapp. You can perform the following steps in your current project or quickly create a new Angular project by hitting ng new my-app-name command.

Read more

Resolved! | FATAL ERROR: JavaScript heap out of memory During Angular NG Serve

In this article, we’ll discuss, how to resolve the “JavaScript heap out of memory” which we face due to insufficient memory allocated to Javascript operations.

Sometime back I faced a similar kind of issue while working on my Angular project.

Like normal day to day tasks I executed the “<strong>ng serve --open</strong>” command to run my project in the browser, but suddenly I faced a very strange issue which looked as shown below:

Read more

Angular Proxy Configuration – Run Multiple Applications from same PORT using PROXY Config

In this port, we will discuss how to configure PROXY in Angular application to run multiple applications on the same port for local development setup.

When we create a new Angular application using Angular CLI, some of the defaults are automatically configured inside the angular.json and other files.

To run the Angular application on local we simply execute the $ ng serve --open command to compile the application open it in the browser on HTTP://localhost:4200 which is the default PORT on localhost when the application is launched.

Read more

Real-Time Angular Form Status Updates using Observables

We are going to discuss How to check if Angular Form is VALID or INVALID across components. We will be getting real-time updates by deploying RxJS Observables to an Angular form to emit its validity.

While implementing Template-driven or Reactive forms, we may need to get the Form status to emit across components or various modules, or sometimes from child to parent component.

To achieve this we can subscribe to two Observable methods available with form object. We’ll be discussing the implementation with examples for both and the differences between them.

Read more

React Tutorial: Validate White and Empty Spaces from Input Fields to Message

We will discuss how to implement white and empty space validation for form input fields in a React application. We will be doing this by using regular expressions which are a powerful tool for pattern matching in strings.

In this article, we will create a sample component that not only detects white and empty spaces but also displays an error message to the user.

Read more