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: [
  ....
  FormsModule,
  ReactiveFormsModule
]

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';


@Component({
  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: ['',[
					Validators.required,
					Validators.minLength(2)
				]],
				password: ['',[
					Validators.required,
					Validators.minLength(2)
				]],
			});

	

	}

	// 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

  		onLogin(){ 
                        // 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-form-field> 

		<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-error>

 	</mat-form-field>


	<mat-form-field>

		<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
		</mat-error>

	</mat-form-field>

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

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