Igor Simic
3 years ago

How to use Reactive Forms in Angular 6 with Material Design

In this example we will create simple login form using Reactive Forms in Angular 6 combined with Material Design. I will assume you already have installed Material Design in your project, and if not please visit this link: https://www.coditty.com/code/add-material-design-to-angular-using-angular-cli-6

So let's start!

First we will include FormsModule and ReactiveFormsModule in app.module.ts
import { FormsModule,ReactiveFormsModule }   from '@angular/forms';


 imports: [

And now let's create login component  and paste this code inside  login.component.ts:
import { Component, OnInit } from '@angular/core';
import {Validators,FormGroup,FormBuilder} from '@angular/forms';

  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']

export class LoginComponent implements OnInit {

        // define login form and assign it to FormGroup
	loginForm: FormGroup;
         // include Form Builder
	constructor(  private fb: FormBuilder) { }

	ngOnInit() {

		// set the form field default values and validation rules
			this.loginForm = this.fb.group({
				username: ['',[
				password: ['',[



	// set getters for all input fields so we can use them to show the error messages on invalid state

		get username(){
			return this.loginForm.get('username');

		get password(){
			return this.loginForm.get('password');


  	// on submit

                        // output submitted data
                        console.log(this.username.value, this.password.value)


Let's create HTML part:
<form fxFlex fxLayout="column" fxLayoutAlign="center center" [formGroup]="loginForm" (ngSubmit)="onLogin()" fxLayoutGap="20px" >


		<mat-label>Enter Username</mat-label>

		<input matInput placeholder="Username" required formControlName="username">

		<mat-hint align="end">Your username</mat-hint>

		<mat-error *ngIf="username.invalid">
			Username is required



		<mat-label>Enter Password</mat-label>

		<input id="password" matInput placeholder="Password" type="Password" name="password" required formControlName="password">
		<mat-hint align="end">Your password</mat-hint>

		<mat-error *ngIf="password.invalid">
			Password is required


	<div >
		<button mat-raised-button
		matTooltip="Info about the action"
		type="submit" [disabled]="password.invalid || username.invalid"

And there you go, you have a simple login form field using Reactive Forms with Angular 6 and Material Design

more info about Reactive Forms in official documentation