Create a Reactive Form Using Angular Material

Introduction

If you’re starting in Angular 2 or above version, maybe you have heard of Angular material. In this article, I am going to tell you how to use Angular material to make reactive Form in your angular project.

Why Angular Material?

Angular Material provides comprehensive, modern UI components that work across the web, mobile, and desktop which has finely tuned performance and fully tested across modern browsers which are built by the Angular team to integrate seamlessly with Angular.

Getting started

For existing angular application, follow these steps to begin using Angular Material

Step 1: Install Angular Material, Angular CDK and Angular Animations. You can use npm command-line tool to install packages.

npm install --save @angular/material @angular/cdk @angular/animations

Step 2: Import BrowserAnimationsModule into your application to enable animations support.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  ...
  imports: [BrowserAnimationsModule],
  ...
})
export class AppModule { }

Step 3: Import the NgModule for each component you want to use in the form:

import {MatButtonModule, MatFormFieldModule, MatInputModule} from '@angular/material';
@NgModule({
  ...
  imports: [
    MatFormFieldModule,
    MatInputModule,
    MatButtonModule
],
  ...
})
export class PizzaPartyAppModule { }

Step 4: Including a theme is required to apply all of the core and theme styles to your application. you can add this to your styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Keep in mind that if you don't include a theme in your application then Angular material component wouldn't work !!

Let's go !!

Let me explain how it works with making a simple Login example. where we are going to use Angular Material components such as matInput, matFormField, matButton, etc. Now go to your app.module.ts and Import ReactiveFormsModule into your application to enable reactive Form

app.module.ts

Note that if you don’t import ReactiveFormModule then you can’t use reactive form in your application !!

Next, Say you have already created a Login Component.

The file structure of Angularmaterial demo project

Let’s start working on the login.component.ts. In login.component.ts we are going to define a FormGroup named loginForm with child FormControl named email and password and validate it using validators such as required for both email and password and pattern to check email if it is valid or not.

login.component.ts

Now let’s go to login.component.html, where we are going to create a form which we bind with formGroup we have created in login.component.ts i.e. loginForm.

Instead of the using Input field and buttons, we are going to use Angular Material input Fields and mat button and bind the fields with there formControlName. We are also going to call loginFxn() function on clicking Log In Button by binding submit form event with loginFxn() function as shown below.

login.component.html

To show error we use Mat-Error which will be shown only when the form field is invalid or empty.

We add the following CSS to make our Form more presentable.

login.component.css

In the end, we will get a beautiful and yet simple login page using Angular material and Reactive form along with form validation.

Login Page

Conclusions

With Angular Material, you get a range of components which implement common interaction patterns according to the Material Design specification such as Form Control, Navigation, Buttons and indicators and lot more.

I’m hoping by now you can see how we can use Angular Material Component in our angular project. To know more about Angular Material dive in their official page on link below.

Angular Material

If you have questions or comments about this let me know in the comments below. You can view the full code here:

armstrom02/AngularMaterial-demo