Reactive forms are one approach to working with forms in Angular 10.

In this blog, we’ll build a login form example with validation using the reactive forms with Validation.

Prerequisites for Working with Reactive Forms in Angular 10

You need to have Node.js and npm installed on your system.

You also need Angular CLI installed or, you can simply run the command to install it.

$ npm install -g @angular/cli

Generating a New Angular 10 Project

Let’s start our Process by generating a new project from scratch. You can skip this part if you already have a project.

Open a new terminal and run this command:

$ ng new angular-login-demo


Figure 1.1: Promises Can be Resolved or Rejected

What is Promise in JavaScript?

A promise is a good way to handle asynchronous operations. It is used to find out if the asynchronous operation is successfully completed or not.

Prior to promises events and callback functions were used but they had limited functionalities and created unmanageable code. Multiple callback functions would create a callback hell that leads to unmanageable code. Events were not good at handling asynchronous operations.

In other words, Promise makes JavaScript behave asynchronously, which makes this language versatile.

How Promises Work?


  • Typescript gets converted into javascript only.
  • It works on any browser, any os that javascript runs.
  • Typescript actually serves your way better in ANGULAR when compared to anything else.


Google has released version 11 of Angular, it's very popular Single Page Application framework. The release focuses on improving the developer’s experience, on updates across the platform including the framework, the CLI, and components. Let's start !!

Some very interesting features of Angular 11 are:-

Fonts Download Automatically
Angular import font by default. During integration, Angular CLI will download in-line fonts and connect the appliance. Angular automatically provides this with version 11. You simply got to update your app.

Harness Exploration Election
Angular v9 introduces Item equipment. Provides a strong and readable API to help with the testing of Angular Material objects. …


Figma is a cloud-based design tool that is similar to Sketch in functionality and features, but with a lot of extra differences that make Figma better for Team Collaboration. Figma provides many tools that can be used in the designing phase, such as it provides plugins, prototype capabilities, and code generation for the developers.

Figma is a free, online UI tool

Let's have a look at the interface:

Kirti Goel

Angular Developer, UI/UX Designer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store