Photo by Markus Winkler on Unsplash
Blog Post #010
Duncan Faulkner November 2020
What is a mat-form-field component?
The mat-form-field
is part of the Angular Material library and is found in the @angular/material/form-field
namespace.
{MatFormFieldModule} from '@angular/material/form-field';
So what is a mat-form-field component? By itself this component doesn’t do much, this component affects other components by applying common styles to components that are wrapped within a mat-form-field
. Typically components like input, textarea, mat-select, and mat-chip-list are wrapped in a mat-form-field
this is considered a best practice, for example:
<mat-form-field>
<input matInput>
</mat-form-field>
Below is the results rendered in the browser.

The input now has an underline underneath it. Selecting the input moves the text from the placeholder to a floating label.

This is the default appearance of the <mat-form-field>
and is called Legacy, the others are Standard, Fill and Outline.
<mat-form-field appearance="legacy">
<input placeholder="application label" matInput>
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>application label</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field appearance="fill">
<mat-label>application label</mat-label>
<input matInput>
</mat-form-field>
<mat-form-field appearance="outline">
<mat-label>application label</mat-label>
<input matInput>
</mat-form-field>

Standard: is an updated version of Legacy to bring it inline with Fill and Outline, the changes are minor and mainly around the spacing.
Fill: adds a background to the input and the placeholder is middle aligned (more space between the placeholder and the bottom line), the floating label remains with in the background.
Outline: adds an outline all round the outer edge of the input and the placeholder is middle aligned (more space between the placeholder and the bottom line), and the floating label is now on top of the outline.
Placeholders: In the Legacy appearance, the placeholder is promoted to a floating label. In Standard, Fill and Outline however, it is just a regular label. If you want a floating label in Standard, Fill and Outline you need to include a <mat-label>
.
matInput: this is an Angular Material directive that allows native HTML input components (input, textarea, select for example) to interact with Angular Material.
Hint messages: The mat-form-field
has two ways to assign a hint message. A hint message is a message that appears underneath the underline. If the hintLabel
attribute of the mat-form-field
is used then the message is left aligned (for the hintLabel
attribute left aligned is the only option).
If the mat-hint
tag is used then these can be left or right aligned, by setting the align
attribute to either start
or end
.

<mat-form-field hintLabel="hint message" appearance="standard">
<mat-label>Standard Input</mat-label>
<input matInput/>
</mat-form-field>

<mat-form-field appearance="standard">
<mat-label>Standard Input</mat-label>
<input matInput/>
<mat-hint align="end">hint message</mat-hint>
</mat-form-field>
Hint message appear underneath the underline. The mat-form-field can have hint messages set either from the mat-form-field or the mat-hint. To set the hint message using the mat-form-field set the hintLabel attribute to a message. With this option the message is left aligned.
<mat-form-field hintLabel="hint message" appearance="standard">
<mat-label>Input</mat-label>
<input matInput>
</mat-form-field>
Using the mat-hint element set a message and alignment, for example:
<mat-form-field appearance="standard">
<mat-label>Input</mat-label>
<input matInput>
<mat-hint align="start">Message</mat-hint>
</mat-form-field>
<mat-form-field appearance="standard">
<mat-label>Input</mat-label>
<input matInput>
<mat-hint align="end">Message</mat-hint>
</mat-form-field>
Adding error messages to a mat-form-field appear underneath the underline. To add an error message add the mat-error element and check the validity of the form control.
<mat-form-field appearance="standard">
<mat-label>Input</mat-label>
<input matInput [formControl]="control" required>
<mat-error *ngIf="control.invalid">This is a required field.</mat-error>
</mat-form-field>
The formControl is part of Angular’s forms module and is used to track the value and validity state of a control. Then in the mat-error we add an *ngIf to check to see if the formControl is invalid, if it we display the error message.
Hope you enjoyed this little tutorial, I will be writing up more articles on Angular Material, feel free to reach out to me on Twitter.