Angular Material Form Controls, Form Field and Input Examples

Working with forms is a fundamental part of building modern web applications, and Angular Material offers a powerful set of UI components to streamline this process. In this tutorial, you'll learn how to create beautiful, consistent, and accessible form controls using Angular Material's mat-form-field, input elements and more — all updated for the latest Angular 19. Whether you're building a simple login form or a complex data entry interface, this guide will walk you through practical examples of form fields, validation, layout, and theming.

Preparation

We will bundle all of these Angular Material Form Controls examples in one application. For that, we will prepare all required Angular applications and Angular Material. Now, we are creating an Angular app using Angular CLI, which needs Node.js and NPM to install or update it. Make sure you have installed Node.js and NPM before installing or updating Angular CLI. To install or update the Angular CLI, type this command.

sudo npm install -g @angular/cli

Next, create a new Angular app using Angular CLI by typing this command.

ng new angular-material-form-controls

That command will create a new Angular app with the name `angular-material-form-controls` and pass all questions as 'Y', then the Angular CLI will automatically install the required NPM modules. After finishing, go to the newly created Angular folder, then run the Angular app for the first time.

cd ./angular-material-form-controls
ng serve --open

Using those "--open" parameters will automatically open Angular in your default web browser. Here's what the Angular default page looks like.

Next, type this command to install Angular Material using Angular CLI's install schematics.

ng add @angular/material

Leave all questions as default to finish the installation.

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink        [ Preview: https://mate
rial.angular.io?theme=indigo-pink ]
? Set up HammerJS for gesture recognition? Yes
? Set up browser animations for Angular Material? Yes

Next, open the Angular application project with your text editor or IDE.

code .

Register the above modules in your component imports (e.g., src/app/app.component.ts).

import { Component } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatSelectModule } from '@angular/material/select';
import { MatOptionModule } from '@angular/material/core';

@Component({
  selector: 'app-root',
  imports: [
    FormsModule,
    ReactiveFormsModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatOptionModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
export class AppComponent {
  title = 'angular-material-form-controls';
}

Now, the Angular Material Form Controls Components and Angular Reactive Form modules are ready to use in Angular Components.

Form Field Examples

The Angular Material Form Field is the wrapper for the other form control elements, such as input, textarea, select, radio button, checkbox, etc. Also, advanced the style for the components that were wrapped by this Form field. The Angular Material Form Field uses the <mat-form-field> tag.

Basic Form Fields

This example shows you a basic form field usage that wraps input, textarea, and select components. We can use `src/app/app.component.html`, then replace the content of the <div class="content" role="main"> element.

<div class="form-container">
  <h1>Angular Material Form Field</h1>
  <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 these styles to `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`.

  <!-- 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 <mat-form-field> to configure floating label mode and hide the required marker (asterisk). Here are 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>

To configure float label globally, you can add MAT_LABEL_GLOBAL_OPTIONS in `src/app/app.config.ts`.

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';

export const appConfig: ApplicationConfig = {
  providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes), { provide: MAT_FORM_FIELD_DEFAULT_OPTIONS, useValue: { floatLabel: 'always' } }]
};

Remove all [floatLabel] properties in each <mat-form-field> that will use global configuration.

Show Hint Labels

This is an example of hint labels using <mat-hint> component that displays a hint in <mat-form-field> with specific position left and right using the 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 ?? 0) }}</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 is wrong while typing or filling in the input. The error messages will be displayed below the input and will be hidden by 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 { FormsModule, ReactiveFormsModule, 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() {
    let errorMessage = '';

    if (this.email.hasError('required')) {
      errorMessage = 'You must enter a value';
    } else if (this.email.hasError('email')) {
      errorMessage = 'Not a valid email';
    }

    return errorMessage;
  }

Back to the HTML, commenting on the previous example, and adding 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 the matPrefix attribute and Suffix or after using the 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 <mat-form-field> style can be overridden or changed by changing the styles of mat-form-field and .mat-form-field. To override it, open and edit `src/app/app.component.scss`, then add these 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 is marked by matInput, which is added to the standard HTML input and text area. That will make the HTML input and text area work inside <mat-form-field>.

Basic Input and TextArea Example

This example is a basic usage of Angular Material matInput inside HTML input and textarea, which is wrapped by <mat-form-field>.

<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 to use input can throw an error that displays at the bottom of the input using a custom ErrorStateMatcher. The use of error messages is allowed by <mat-form-field>. To use ErrorStateMatcher, add/modify these imports to the `src/app/app.component.ts`.

import { FormsModule, ReactiveFormsModule, FormControl, Validators, FormGroupDirective, NgForm } from '@angular/forms';
import { ErrorStateMatcher, MatOptionModule } 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?.submitted;
    return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted));
  }
}

Add this FormControl validator and instantiate ErrorStateMatcher inside the 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>

Conclusion

Angular Material makes building consistent, accessible, and visually appealing forms simple and efficient. With components like mat-form-field, mat-input, validation messages and layout options, developers can quickly create user-friendly form experiences that align with modern design standards. In this tutorial, we explored how to implement form fields and input elements using the latest Angular 19, along with best practices for validation and UI responsiveness. With these tools, you're well-equipped to handle forms in any Angular application with confidence.

You can get the full source code on our GitHub.

If you don’t want to waste your time designing 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.

That's just the basics. If you need more deep learning about MEAN Stack, Angular, and Node.js, you can take the following cheap course:

• Master en JavaScript: Aprender JS, jQuery, Angular 8, NodeJS
• Angular 8 - Complete Essential Guide
• Learn Angular 8 by creating a simple Full Stack Web App
• Angular 5 Bootcamp FastTrack
• Angular 6 - Soft & Sweet
• Angular 6 with TypeScript

Thanks!