Angular Material Inputs

By Arvind Rai, September 14, 2018

This page will walk through Angular Material inputs example. Angular Material provides MatInput Directive to create <input> and <textarea> element with a MatFormField. To use MatInput we need to import MatInputModule in application module. MatInput provides errorStateMatcher property to assign ErrorStateMatcher object to control when to show validation error. The selector of MatInput is matInput. Inputs are used with MatFormField that applies common underline, floating label and hint messages etc. The selector of MatFormField is <mat-form-field>. We use <mat-label>, <mat-hint>, <mat-error> with <input matInput> and <textarea matInput> inside <mat-form-field>.
Angular Component Dev Kit (CDK) provides CdkTextareaAutosize Directive to automatically resize a textarea to fit its content. It provides cdkTextareaAutosize property to enable autosizing, cdkAutosizeMinRows property to define minimum amount of rows and cdkAutosizeMaxRows property to define maximum amount of rows in the textarea for autosizing. CdkTextareaAutosize also provides resizeToFitContent() method to resize the text area to fit its content and reset() method to reset the textarea to original size.
On this page we will create Angular Material inputs and validate it. We will create input text, color, date, time, number and textarea using reactive form as well as template-driven form.

Technologies Used
Import MatInputModule
Use MatInput to create Inputs
Using <mat-form-field>
Validation of Input Text
Validation of Textarea
Using Custom ErrorStateMatcher
Using CdkTextareaAutosize for Textarea
Reactive Form Example using Inputs
Template-Driven Form Example using Inputs
Run Application
References
Download Source Code

Technologies Used

Find the technologies being used in our example.
1. Angular 6.1.0
2. Angular CLI 6.1.3
3. Angular Material 6.4.7
4. TypeScript 2.7.2
5. Node.js 10.3.0
6. NPM 6.1.0

Import MatInputModule

To work with Angular Material <input> and <textarea>, we need to import MatInputModule in application module.

import { MatInputModule } from '@angular/material/input';
 
@NgModule({
  imports: [
    ------
    MatInputModule
  ],
  ------
})
export class AppModule { }

Use MatInput to create Inputs

Angular Material uses MatInput Directive to create <input> and <textarea> inside a <mat-form-field>. MatInput Directive selector is matInput. It is used with color, date, datetime-local, email, month, number, password, search, tel, text, time, url, week input types and textarea.
MatInput has following properties.
errorStateMatcher: This is ErrorStateMatcher object to control when error messages are shown.
readonly: This is Boolean value to know if element is readonly.
type: It gives input type of the element.
errorState: This is Boolean value to know if control is in error state or not.
Find the sample code snippet to create <input> and <textarea>.
1. Find the code snippet to create <input> using matInput selector.

<mat-form-field>
  <input matInput placeholder="Amount" 
      [formControl]="amount" 
      (change)="onAmountChange()">
</mat-form-field>

Find the code snippet of TS file.

amount = new FormControl();
onAmountChange() {
  console.log(this.amount.value);
}

2. Find the code snippet to create <textarea> using matInput selector.

<mat-form-field>
  <textarea matInput 
     placeholder="Comment" 
     [formControl]="commentFC" 
     (change)="onCommentChange()">
  </textarea>
</mat-form-field>

Find the code snippet of TS file.

commentFC = new FormControl();
onCommentChange() {
  console.log(this.commentFC.value);
}

Using <mat-form-field>

<input matInput> and <textarea matInput> are used inside <mat-form-field>. It applies common underline, floating label and hint messages etc. <mat-form-field> is used with <input matInput> as given below.
1. Using <mat-label>

<mat-form-field>
  <mat-label>Enter City</mat-label>
  <input matInput placeholder="City">
</mat-form-field>

2. Using <mat-hint>

<mat-form-field>
  <mat-label>Enter City</mat-label>
  <input matInput placeholder="City">
  <mat-hint>Native place city</mat-hint>
</mat-form-field>

3. Using <mat-error>
Suppose we have a FormControl object as following.

myCity = new FormControl('', Validators.required);

Now find the HTML template code.

<mat-form-field>
  <mat-label>Enter City</mat-label>
  <input matInput placeholder="City" [formControl]="myCity">
  <mat-hint>Native place city</mat-hint>
  <mat-error *ngIf="myCity.hasError('required')">
    City is required.
  </mat-error>  
</mat-form-field>

4. Using matPrefix and matSuffix

<mat-form-field>
  <mat-label>Enter Amount</mat-label>
  <input matInput placeholder="Amount" [formControl]="amount">
  <mat-hint>Indian Rupee</mat-hint>
  <span matPrefix>INR </span>
  <span matSuffix>.00</span>  
  <mat-error *ngIf="amount.hasError('required')">
    Amount is required.
  </mat-error>  
</mat-form-field>

5. With <textarea matInput>
Suppose we have a FormControl object as following.

commentFC = new FormControl('', [
   Validators.required, 
   Validators.maxLength(30)
]);

Now find the HTML template code to create textarea.

<mat-form-field>
  <mat-label>Write Your Comment</mat-label>
  <textarea matInput placeholder="Comment" 
       [formControl]="commentFC" #comment></textarea>
  <mat-hint align="end">{{comment.value?.length || 0}}/30</mat-hint>
  <mat-error *ngIf="commentFC.hasError('required')">
      Comment is required.
  </mat-error>
  <mat-error *ngIf="commentFC.hasError('maxlength')">
      Max length is 30.
  </mat-error>        
</mat-form-field>

Validation of Input Text

We will validate input text here. We will validate for required, maximum value and minimum value of a number using Validators and FormControl. Find the code snippet of TS file.

amount = new FormControl('', [
  Validators.required,
  Validators.min(100),
  Validators.max(200)
]);
onAmountChange() {
  console.log(this.amount.value);
  console.log(this.amount.valid);
}

Find the code snippet of HTML template.

<mat-form-field>
  <mat-label>Enter Amount</mat-label>
  <input matInput placeholder="Amount" [formControl]="amount" (change)="onAmountChange()">
  <mat-hint>Indian Rupee</mat-hint>
  <span matPrefix>INR </span>
  <span matSuffix>.00</span>  
  <mat-error *ngIf="amount.hasError('required')">
    Amount is required.
  </mat-error>  
  <mat-error *ngIf="amount.hasError('min')">
    Minimum Amount is 100.
  </mat-error>  
  <mat-error *ngIf="amount.hasError('max')">
    Maximum Amount is 200.
  </mat-error>        
</mat-form-field>

Validation of Textarea

We will validate input <textarea> here. We will validate for required, maximum length using Validators and FormControl. Find the code snippet of TS file.

commentFC = new FormControl('', [
  Validators.required, 
  Validators.maxLength(30)
]);
onCommentChange() {
  console.log(this.commentFC.value);
  console.log(this.commentFC.valid);
}

Find the code snippet of HTML template.

<mat-form-field>
  <textarea matInput 
      placeholder="Comment" 
      [formControl]="commentFC" 
      (change)="onCommentChange()">
  </textarea>
  <mat-hint align="end">{{commentFC.value?.length || 0}}/30</mat-hint>
  <mat-error *ngIf="commentFC.hasError('required')">
    Comment is required.
  </mat-error>
  <mat-error *ngIf="commentFC.hasError('maxlength')">
    Max length is 30.
  </mat-error>        
</mat-form-field>

Find the print screen of the output for input and textarea.

Using Custom ErrorStateMatcher

Angular Material provides ErrorStateMatcher to control when to show error. It has isErrorState() method that accepts FormControl and FormGroupDirective or NgForm as arguments and returns Boolean. To create custom ErrorStateMatcher class, we need to implement ErrorStateMatcher and override isErrorState(). If isErrorState() returns true, error will be shown and if false then error will not be shown. To use it with <input> and <textarea> input, MatInput Directive provides errorStateMatcher property. We need to assign the object of custom ErrorStateMatcher to errorStateMatcher property. Find our custom ErrorStateMatcher.
custom-error-state-matcher.ts

import { ErrorStateMatcher } from '@angular/material/core';
import { FormControl, FormGroupDirective, NgForm } from '@angular/forms';

export class CustomErrorStateMatcher implements ErrorStateMatcher {
    isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
      const isSubmitted = form && form.submitted;
      return (control.invalid && (control.dirty || control.touched || isSubmitted));
    }
}

Our custom ErrorStateMatcher can be used for a <input> and <textarea> using errorStateMatcher property or globally for every <input> and <textarea> in the application.
a. To use errorStateMatcher property, we will create an instance of CustomErrorStateMatcher in TS file.

esMatcher = new CustomErrorStateMatcher();

Now use esMatcher object with errorStateMatcher property.

<mat-form-field>
  <mat-label>Enter Amount</mat-label>
  <input matInput placeholder="Amount" 
      [formControl]="amount" 
      [errorStateMatcher]="esMatcher"
      (change)="onAmountChange()">
  <mat-hint>Indian Rupee</mat-hint>
  <span matPrefix>INR </span>
  <span matSuffix>.00</span>  
  <mat-error *ngIf="amount.hasError('required')">
    Amount is required.
  </mat-error>  
  <mat-error *ngIf="amount.hasError('min')">
    Minimum Amount is 100.
  </mat-error>  
  <mat-error *ngIf="amount.hasError('max')">
    Maximum Amount is 200.
  </mat-error>        
</mat-form-field>

<br/>
<mat-form-field>
  <textarea matInput 
      placeholder="Comment" 
      [formControl]="commentFC" 
      [errorStateMatcher]="esMatcher"
      (change)="onCommentChange()">
  </textarea>
  <mat-hint align="end">{{commentFC.value?.length || 0}}/30</mat-hint>
  <mat-error *ngIf="commentFC.hasError('required')">
    Comment is required.
  </mat-error>
  <mat-error *ngIf="commentFC.hasError('maxlength')">
    Max length is 30.
  </mat-error>        
</mat-form-field>

b. To use custom ErrorStateMatcher globally, configure provider in application module as following.

providers: [
  {provide: ErrorStateMatcher, useClass: CustomErrorStateMatcher}
]

Now CustomErrorStateMatcher will be applied to all <input> and <textarea> element in the application. Angular material also provides ShowOnDirtyErrorStateMatcher that matches when a control is invalid and dirty.

Using CdkTextareaAutosize for Textarea

CdkTextareaAutosize Directive is used to automatically resize a textarea to fit its content. Component Dev Kit (CDK) provides high quality predefined behavior for the components. CDK allows us to add common interaction patterns with minimal effort.
Find the CdkTextareaAutosize properties to use with textarea.
1. cdkTextareaAutosize
It defines whether autosizing is enabled or not. cdkTextareaAutosize is used with <textarea> element. It is declared in CdkTextareaAutosize Directive as following.

@Input('cdkTextareaAutosize')
get enabled(): boolean { return this._enabled; }

We can use enabled property in TS file to know if autosize is enabled or not.
2. cdkAutosizeMinRows
It defines minimum amount of rows in the textarea for autosizing. cdkAutosizeMinRows is used with <textarea> element. It is declared in CdkTextareaAutosize Directive as following.

@Input('cdkAutosizeMinRows')
get minRows(): number { return this._minRows; }

We can use minRows property in TS file to get configured autosize minimum rows.
3. cdkAutosizeMaxRows
It defines maximum amount of rows in the textarea for autosizing. cdkAutosizeMaxRows is used with <textarea> element. It is declared in CdkTextareaAutosize Directive as following.

@Input('cdkAutosizeMaxRows')
get maxRows(): number { return this._maxRows; }

We can use maxRows property in TS file to get configured autosize maximum rows.

Now find the sample example of textarea with autosize configurations.

<mat-form-field>
  <textarea matInput 
	placeholder="Description" 
	[formControl]="descFC" 
	cdkTextareaAutosize
	cdkAutosizeMinRows="2"
	cdkAutosizeMaxRows="5"
	#autosize="cdkTextareaAutosize"
	(change)="onDescChange()">
  </textarea>
  <mat-error *ngIf="descFC.hasError('required')">
    Description is required.
  </mat-error>
</mat-form-field>

Find the TS file code snippet.

descFC = new FormControl('', [
  Validators.required
]);
@ViewChild('autosize') 
txtAreaAutosize: CdkTextareaAutosize;
  
onDescChange() {
  console.log("enabled: "+ this.txtAreaAutosize.enabled);
  console.log("minRows: "+ this.txtAreaAutosize.minRows);
  console.log("maxRows: "+ this.txtAreaAutosize.maxRows);
  console.log("Description: "+ this.descFC.value);
}

4. resizeToFitContent()
resizeToFitContent() method of CdkTextareaAutosize is used to resize the text area to fit its content. It accepts Boolean value. By passing true we can force a height calculation. By default, height calculation is performed only when value changed since the last call.
5. reset()
reset() method of CdkTextareaAutosize resets the textarea to original size. When we configure cdkAutosizeMinRows and cdkAutosizeMaxRows in textarea, it is auto resized. On calling reset(), textarea resizes to its original size.

Find the HTML code snippet to test resizeToFitContent() and reset().

<div>
  <mat-form-field [style.fontSize]="fontSize.value">
    <textarea matInput 
        placeholder="Content" 
        [formControl]="contentFC" 
        cdkTextareaAutosize
        cdkAutosizeMinRows="2"
        cdkAutosizeMaxRows="5"
        #cfcAutosize="cdkTextareaAutosize">
    </textarea>
  </mat-form-field>
</div>
<div>   
  <button mat-button (click)="resetTextAreaSize()">Reset Textarea Size</button>
</div>
<br/>
<div>  
  <mat-form-field>
    <mat-label>Select Font size</mat-label>
    <mat-select #fontSize value="15px" (selectionChange)="resizeTextArea()">
      <mat-option value="10px">10px</mat-option>
      <mat-option value="15px">15px</mat-option>
      <mat-option value="20px">20px</mat-option>
    </mat-select>
  </mat-form-field>
</div>

Find the TS file code snippet.

constructor(private ngZone: NgZone) {} 
contentFC = new FormControl();

@ViewChild('cfcAutosize') 
contentFCAutosize: CdkTextareaAutosize;

resizeTextArea() {
  this.ngZone.onStable.pipe(take(1))
	.subscribe(() => this.contentFCAutosize.resizeToFitContent(true));
}
resetTextAreaSize() {
  this.contentFCAutosize.reset();
}

NgZone is an injectable service for executing work inside or outside of the Angular zone.

Reactive Form Example using Inputs

Find the complete code to create inputs using reactive form.
reactive-form.component.html

<h4>1. Input Text validation</h4>
<mat-form-field>
  <mat-label>Enter Amount</mat-label>
  <input matInput placeholder="Amount" 
      [formControl]="amount" 
      [errorStateMatcher]="esMatcher"
      (change)="onAmountChange()">
  <mat-hint>Indian Rupee</mat-hint>
  <span matPrefix>INR </span>
  <span matSuffix>.00</span>  
  <mat-error *ngIf="amount.hasError('required')">
    Amount is required.
  </mat-error>  
  <mat-error *ngIf="amount.hasError('min')">
    Minimum Amount is 100.
  </mat-error>  
  <mat-error *ngIf="amount.hasError('max')">
    Maximum Amount is 200.
  </mat-error>        
</mat-form-field>

<h4>2. Textarea validation</h4>
<mat-form-field>
  <textarea matInput 
      placeholder="Comment" 
      [formControl]="commentFC" 
      [errorStateMatcher]="esMatcher"
      (change)="onCommentChange()">
  </textarea>
  <mat-hint align="end">{{commentFC.value?.length || 0}}/30</mat-hint>
  <mat-error *ngIf="commentFC.hasError('required')">
    Comment is required.
  </mat-error>
  <mat-error *ngIf="commentFC.hasError('maxlength')">
    Max length is 30.
  </mat-error>        
</mat-form-field>

<h4>3. Textarea autosize</h4>
<mat-form-field>
  <textarea matInput 
      placeholder="Description" 
      [formControl]="descFC" 
      cdkTextareaAutosize
      cdkAutosizeMinRows="2"
      cdkAutosizeMaxRows="5"
      #autosize="cdkTextareaAutosize"
      (change)="onDescChange()">
  </textarea>
  <mat-error *ngIf="descFC.hasError('required')">
    Description is required.
  </mat-error>
</mat-form-field>

<h4>4. resizeToFitContent() and Reset() test</h4>
<div>
  <mat-form-field [style.fontSize]="fontSize.value">
    <textarea matInput 
        placeholder="Content" 
        [formControl]="contentFC" 
        cdkTextareaAutosize
        cdkAutosizeMinRows="2"
        cdkAutosizeMaxRows="5"
        #cfcAutosize="cdkTextareaAutosize">
    </textarea>
  </mat-form-field>
</div>
<div>   
  <button mat-raised-button (click)="resetTextAreaSize()">Reset Textarea Size</button>
</div>
<br/>
<div>  
  <mat-form-field>
    <mat-label>Select Font size</mat-label>
    <mat-select #fontSize value="15px" (selectionChange)="resizeTextArea()">
      <mat-option value="10px">10px</mat-option>
      <mat-option value="15px">15px</mat-option>
      <mat-option value="20px">20px</mat-option>
    </mat-select>
  </mat-form-field>
</div>

<h3>5. Person Reactive Form</h3>
<form [formGroup]="personForm" (ngSubmit)="onFormSubmit()">
  <div>
    <mat-form-field>
      <input matInput placeholder="Username" formControlName="username" [errorStateMatcher]="esMatcher">
      <mat-error *ngIf="username.hasError('required')">
        Username is required.
      </mat-error>
    </mat-form-field>  
  </div>
  <div>
    <mat-form-field>
      <input matInput type="password" formControlName="password" placeholder="Password" 
         [errorStateMatcher]="esMatcher">
      <mat-error *ngIf="password.hasError('required')">
        Password is required.
      </mat-error>
    </mat-form-field>
  </div>  
  <div>
    <mat-form-field>
      <textarea matInput 
          placeholder="Address" 
          formControlName="address" 
          cdkTextareaAutosize
          cdkAutosizeMinRows="2"
          cdkAutosizeMaxRows="4"          
          [errorStateMatcher]="esMatcher">
      </textarea>
      <mat-error *ngIf="address.hasError('required')">
        Comment is required.
      </mat-error>
      <mat-error *ngIf="address.hasError('maxlength')">
        Max length is 100.
      </mat-error>        
    </mat-form-field>
  </div>  
  <div>
    <mat-form-field>
      <input matInput type="color" formControlName="favColor" placeholder="Favorite color">
    </mat-form-field>
  </div>
  <div>
    <mat-form-field>                
      <input matInput type="date" formControlName="dob" placeholder="Date of birth">
    </mat-form-field>
  </div>
  <div>
    <mat-form-field>
      <input matInput type="time" formControlName="tob" placeholder="Time of birth">
    </mat-form-field>
  </div>   
  <div>
    <mat-form-field>
      <input matInput type="number" formControlName="age" placeholder="Age">
    </mat-form-field>
  </div>
  <div>   
    <button mat-raised-button>Submit</button>
  </div>  
</form>

reactive-form.component.ts

import { Component, OnInit, ViewChild, NgZone } from '@angular/core';
import { FormControl, Validators, FormBuilder } from '@angular/forms';
import { CdkTextareaAutosize } from '@angular/cdk/text-field';
import { take } from 'rxjs/operators';

import { CustomErrorStateMatcher } from './custom-error-state-matcher';
import { PersonService } from './person.service';

@Component({
  selector: 'app-reactive',
  templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
  constructor(private ngZone: NgZone,
        private formBuilder: FormBuilder,
        private personService: PersonService) {} 
  ngOnInit() {
  } 
  esMatcher = new CustomErrorStateMatcher();  
  //Input text validation
  amount = new FormControl('', [
    Validators.required,
    Validators.min(100),
    Validators.max(200)
  ]);
  onAmountChange() {
    console.log(this.amount.value);
    console.log(this.amount.valid);
  }
  //Textarea validation
  commentFC = new FormControl('', [
    Validators.required, 
    Validators.maxLength(30)
  ]);
  onCommentChange() {
    console.log(this.commentFC.value);
    console.log(this.commentFC.valid);
  }

  //Textarea autosize
  descFC = new FormControl('', [
    Validators.required
  ]);
  @ViewChild('autosize') 
  txtAreaAutosize: CdkTextareaAutosize;
  
  onDescChange() {
    console.log("enabled: "+ this.txtAreaAutosize.enabled);
    console.log("minRows: "+ this.txtAreaAutosize.minRows);
    console.log("maxRows: "+ this.txtAreaAutosize.maxRows);
    console.log("Description: "+ this.descFC.value);
  }

  //resizeToFitContent() and Reset() test
  contentFC = new FormControl();
  @ViewChild('cfcAutosize') 
  contentFCAutosize: CdkTextareaAutosize;

  resizeTextArea() {
    this.ngZone.onStable.pipe(take(1))
        .subscribe(() => this.contentFCAutosize.resizeToFitContent(true));
  }
  resetTextAreaSize() {
    this.contentFCAutosize.reset();
  }

  //Create a form
  personForm = this.formBuilder.group({
    username: ['', Validators.required],
    password: ['', Validators.required],
    address: ['', [Validators.required, Validators.maxLength(100)]],
    favColor: '#e66465',
    dob: '',
    tob: '',
    age: ''
  });
  onFormSubmit() {
    this.personService.savePerson(this.personForm.value);
  }
  get username() {
    return this.personForm.get('username');
  }  
  get password() {
    return this.personForm.get('password');
  }  

  get address() {
    return this.personForm.get('address');
  }    
}

person.ts

export interface Person {
  username: string;
  password: string;
  address: string;
  favColor: string;
  dob: string;
  tob: string;
  age: number;
}

person.service.ts

import { Injectable } from '@angular/core';
import { Person } from './person';

@Injectable({
  providedIn: 'root'
})
export class PersonService {
  savePerson(person: Person) {
     console.log(person);  
  }
}

Find the print screen of the output.

Template-Driven Form Example using Inputs

Find the complete code to create inputs using template-driven form.
template-driven-form.component.html

<h3>6. Person Template-Driven Form</h3>
<form #personForm="ngForm" (ngSubmit)="onFormSubmit(personForm)">  
  <div>
    <mat-form-field>
      <input matInput placeholder="Username" 
      name="username" 
      required
      ngModel
      #name="ngModel"
      [errorStateMatcher]="esMatcher">
      <mat-error *ngIf="name.hasError('required')">
        Username is required.
      </mat-error>
    </mat-form-field>  
  </div>
  <div>
    <mat-form-field>
      <input matInput type="password" name="password" ngModel required placeholder="Password" 
         #pwd="ngModel" [errorStateMatcher]="esMatcher">
      <mat-error *ngIf="pwd.hasError('required')">
        Password is required.
      </mat-error>
    </mat-form-field>
  </div>  
  <div>
    <mat-form-field>
      <textarea matInput 
          placeholder="Address" 
          name="address" 
          required
          maxlength="100"
          ngModel
          #address="ngModel"
          cdkTextareaAutosize
          cdkAutosizeMinRows="2"
          cdkAutosizeMaxRows="4"          
          [errorStateMatcher]="esMatcher">
      </textarea>
      <mat-error *ngIf="address.hasError('required')">
        Comment is required.
      </mat-error>
    </mat-form-field>
  </div>  
  <div>
    <mat-form-field>
      <input matInput type="color" name="favColor" [ngModel]="'#e66465'" placeholder="Favorite color">
    </mat-form-field>
  </div>
  <div>
    <mat-form-field>                
      <input matInput type="date" name="dob" ngModel placeholder="Date of birth">
    </mat-form-field>
  </div>
  <div>
    <mat-form-field>
      <input matInput type="time" name="tob" ngModel placeholder="Time of birth">
    </mat-form-field>
  </div>   
  <div>
    <mat-form-field>
      <input matInput type="number" name="age" ngModel placeholder="Age">
    </mat-form-field>
  </div>  
  <div>   
    <button mat-raised-button>Submit</button>
  </div>  
</form>

template-driven-form.component.ts

import { Component, OnInit } from '@angular/core';
import { CustomErrorStateMatcher } from './custom-error-state-matcher';
import { PersonService } from './person.service';

@Component({
  selector: 'app-template-driven',
  templateUrl: './template-driven-form.component.html'
})
export class TemplateDrivenFormComponent implements OnInit {
  constructor(private personService: PersonService) {} 
  ngOnInit() {
  } 
  esMatcher = new CustomErrorStateMatcher();  
  onFormSubmit(form) {
    this.personService.savePerson(form.value);
  } 
}

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <app-reactive></app-reactive>
    <app-template-driven></app-template-driven>
  ` 
})
export class AppComponent {
}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import { MatButtonModule } from '@angular/material/button';

import { ErrorStateMatcher } from '@angular/material/core';

import { CustomErrorStateMatcher } from './custom-error-state-matcher';
import { AppComponent } from './app.component';
import { ReactiveFormComponent } from './reactive-form.component';
import { TemplateDrivenFormComponent } from './template-driven-form.component';

@NgModule({
  declarations: [
    AppComponent,
    ReactiveFormComponent,
    TemplateDrivenFormComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,    
    ReactiveFormsModule,
    MatFormFieldModule,
    MatInputModule,
    MatSelectModule,
    MatButtonModule
  ],
  providers: [
   // {provide: ErrorStateMatcher, useClass: CustomErrorStateMatcher}
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

styles.css

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

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200