element.

<div class="form-container">
  <mat-form-field>
    <input matInput placeholder="Input">
  </mat-form-field>

  <mat-form-field>
    <textarea matInput placeholder="Textarea"></textarea>
  </mat-form-field>

  <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>
</div>

Add this styles on src/app/app.component.scss.

.form-container {
  display: flex;
  flex-direction: column;
}

.form-container > * {
  width: 100%;
}

Form Field with Appearance Property Example

This example will show you the Form field appearance property usage. You can comment out the previous example and add these HTML tags in src/app/app.component.html.

<!-- Legacy form field -->
<p>
  <mat-form-field appearance="legacy">
    <mat-label>Email Address:</mat-label>
    <input matInput placeholder="Your email">
    <mat-icon matSuffix>mail_outline</mat-icon>
    <mat-hint>Input the fully qualified email address</mat-hint>
  </mat-form-field>
</p>
<!-- Standard form field -->
<p>
  <mat-form-field appearance="standard">
    <mat-label>Phone Number:</mat-label>
    <input matInput placeholder="Your Phone">
    <mat-icon matSuffix>phone</mat-icon>
    <mat-hint>Phone number with Country code</mat-hint>
  </mat-form-field>
</p>
<!-- Fill form field -->
<p>
  <mat-form-field appearance="fill">
    <mat-label>Username:</mat-label>
    <input matInput placeholder="Your username">
    <mat-icon matSuffix>person_outline</mat-icon>
    <mat-hint>Use unique username</mat-hint>
  </mat-form-field>
</p>
<!-- Outline form field -->
<p>
  <mat-form-field appearance="outline">
    <mat-label>Password</mat-label>
    <input matInput placeholder="Your password">
    <mat-icon matSuffix>lock</mat-icon>
    <mat-hint>Min 8 char 1 number and 1 alpha</mat-hint>
  </mat-form-field>
</p>

Floating Label and Hide Required Marker

There are properties in to configure floating label mode and hide required marker (asterix). Here the examples for them.

<!-- Hide required marker (asterix) and auto float label -->
<mat-form-field [hideRequiredMarker]="true" [floatLabel]="'auto'">
  <input matInput placeholder="First Name" required>
</mat-form-field>

<!-- Show required marked (asterix) and auto float label -->
<mat-form-field [floatLabel]="'auto'">
  <mat-label>Last Name</mat-label>
  <input matInput placeholder="Last Name" required>
</mat-form-field>

<!-- Always float label -->
<mat-form-field [floatLabel]="'always'">
  <mat-label>Nickname</mat-label>
  <input matInput placeholder="Nickname">
</mat-form-field>

<!-- Disable float label -->
<mat-form-field [floatLabel]="'never'">
  <mat-label>Family Name</mat-label>
  <input matInput placeholder="Family Name">
</mat-form-field>

To configure float label globally you can add this import of MAT_LABEL_GLOBAL_OPTIONS in src/app/app.module.ts.

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

Add it to @NgModule providers.

providers: [
  { provide: MAT_LABEL_GLOBAL_OPTIONS, useValue: {float: 'always'} }
],

Remove all [floatLabel] property in each that will use global configuration.

Show Hint Labels

This is an example of hint labels using component that display hint in with specific position left and right using align attribute.

<mat-form-field hintLabel="Min 6 and Max 10 characters">
  <input matInput #input minLength="6" maxlength="20" placeholder="Enter Your Username">
  <mat-hint align="end">Estimate: {{(20 - input.value?.length) || 20}}</mat-hint>
</mat-form-field>

<mat-form-field>
  <input matInput placeholder="Enter Your Email">
  <mat-hint align="end">Fill with the valid email ^</mat-hint>
</mat-form-field>

Show Error Messages

This example will show you how to display an error message if something wrong while type or fill the input. The error messages will be displayed below the input and will be hidden as default if there are no errors caught. This example will use Angular FormControl validator, for that, open and edit src/app/app.component.ts then add this import.

import { FormControl, Validators } from '@angular/forms';

Add a variable of the FormControl and the validator.

email = new FormControl('', [Validators.required, Validators.email]);

Add a function to display the error messages.

getErrorMessage() {
  return this.email.hasError('required') ? 'You must enter a value' :
      this.email.hasError('email') ? 'Not a valid email' :
          '';
}

Back to the HTML, commenting on the previous example and add this example of error messages.

<mat-form-field>
  <input matInput placeholder="Enter your email" [formControl]="email" required>
  <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
</mat-form-field>

Prefix/Suffix or Before/After Label

The Form Field can show labels before and after the input. Prefix or before using matPrefix attribute and Suffix or after using matSuffix. Here's the example.

<mat-form-field>
  <input matInput placeholder="Price" type="number" class="example-right-align">
  <span matPrefix>Rp.</span>
  <span matSuffix>.00</span>
</mat-form-field>

Styling the Form Field

The style can override or change by change the styles of mat-form-field and .mat-form-field. To override it, open and edit src/app/app.component.scss then add this styles.

mat-form-field.mat-form-field {
  font-size: 16px;
  color: blue;
  background-color: burlywood;
  border: solid 1px #c0c0ff;
}

Input Examples

The Angular Material input or text-area marked by matInput that added to standard HTML input and text-area. That will make the HTML input and text-area works inside .

Basic Input and TextArea Example

This example is basic usage of Angular Material matInput inside HTML input and textarea which wrapped by .

<mat-form-field class="example-full-width">
  <input matInput placeholder="Article Title" value="The Angular 8 Material">
</mat-form-field>

<mat-form-field class="example-full-width">
  <textarea matInput placeholder="Article Description"></textarea>
</mat-form-field>

Supported Input Types Example

This example is the supported types for input mapInput like text, color, date, datetime-local, email, month, number, password, search, tel, time, url, and week.

<!-- Text -->
<mat-form-field class="example-full-width">
  <input matInput type="text" placeholder="Article Title" value="The Angular 8 Material">
</mat-form-field>
<!-- Color -->
<mat-form-field class="example-full-width">
  <input matInput type="color" placeholder="Choose Your Color">
</mat-form-field>
<!-- Date -->
<mat-form-field class="example-full-width">
  <input matInput type="date" placeholder="Published Date">
</mat-form-field>
<!-- Datetime-Local -->
<mat-form-field class="example-full-width">
  <input matInput type="datetime-local" placeholder="Published Date (Local)">
</mat-form-field>
<!-- Email -->
<mat-form-field class="example-full-width">
  <input matInput type="email" placeholder="Your Email Address">
</mat-form-field>
<!-- Month -->
<mat-form-field class="example-full-width">
  <input matInput type="month" placeholder="Published Month">
</mat-form-field>
<!-- Number -->
<mat-form-field class="example-full-width">
  <input matInput type="number" placeholder="Price">
</mat-form-field>
<!-- Password -->
<mat-form-field class="example-full-width">
  <input matInput type="password" placeholder="Enter Your Password">
</mat-form-field>
<!-- Search -->
<mat-form-field class="example-full-width">
  <input matInput type="search" placeholder="Find here">
</mat-form-field>
<!-- Phone Number -->
<mat-form-field class="example-full-width">
  <input matInput type="tel" placeholder="Your Phone Number">
</mat-form-field>
<!-- Time -->
<mat-form-field class="example-full-width">
  <input matInput type="time" placeholder="Release Time">
</mat-form-field>
<!-- URL -->
<mat-form-field class="example-full-width">
  <input matInput type="url" placeholder="Your Website">
</mat-form-field>
<!-- Week -->
<mat-form-field class="example-full-width">
  <input matInput type="week" placeholder="Release Week">
</mat-form-field>

Input with a custom ErrorStateMatcher

Failure input usage can throw an error that display at the bottom of the input using custom ErrorStateMatcher. The use of error message is allowed by . To use ErrorStateMatcher, add/modify these imports to the src/app/app.component.ts.

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

Add this class of ErrorStateMatcher before the main @Component.

/** Error when invalid control is dirty, touched, or submitted. */
export class MyErrorStateMatcher implements ErrorStateMatcher {
  isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean {
    const isSubmitted = form && form.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

Add this FormControl validator and instantiate ErrorStateMatcher inside AppComponent bracket.

emailFormControl = new FormControl('', [
  Validators.required,
  Validators.email,
]);

matcher = new MyErrorStateMatcher();

Back to src/app/app.component.html then add this example of ErrorStateMatcher usage.

<mat-form-field class="example-full-width">
  <input matInput placeholder="Email Address" [formControl]="emailFormControl"
         [errorStateMatcher]="matcher">
  <mat-hint>Errors appear instantly!</mat-hint>
  <mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required')">
    Please enter a valid email address
  </mat-error>
  <mat-error *ngIf="emailFormControl.hasError('required')">
    Email is <strong>required</strong>
  </mat-error>
</mat-form-field>

That it's, the example of Angular Material Form Controls, Form Field, and Input. As usual, you can get full source codes in our GitHub.

If you don’t want to waste your time design your own front-end or your budget to spend by hiring a web designer then Angular Templates is the best place to go. So, speed up your front-end web development with premium Angular templates. Choose your template for your front-end project here.