An Introduction to Angular Material Form-Fields
Introduction
In this post, we will take a look at the Angular Material Form-Field Component. Why you would want to use a Form-Field component and what effect does it have on other components that are wrapped in a Form-Field.
What we’ll cover in this post.
- What is a mat-form-field component?
- What components does form-field support?
- Styling a form-field using the appearance options.
- Adding floating labels.
- Adding a required marker.
- Setting appearance, floating label and required marker globally.
- Adding a Prefix and Suffix to a component.
- Adding Hint labels.
- Adding Error Messages.
- Using themes.
What is a Material Form-Field?
A mat-form-field is a component from the Angular Material library. We can wrap both native and Angular Material components, for example, input, text area, select, mat-select, mat-chip-list.
There are some components that do not work with a mat-form-field and we’ll take a look at a few of them in a moment.
So, what does a mat-form-field component actually do once it has been wrapped around an input component?
The mat-form-field applies common text field styles like floating labels, hints and error messages and we’ll take a look at each of these throughout this post.
Let’s look at an example of the mat-form-field in an HTML form.
Simple Example
In its simplest form, a mat-form-field is just a container for other form controls. A mat-form-fields role is to apply styling and behaviour to certain controls that are placed within the mat-form-field tags this allows us to provide a consistent look and feel across our application.
In the example, we have a mat-card component, with a mat-form-field within the mat-card-content section. In the mat-form-field, we have a native input element with a placeholder with the type set to text. We also have the matInput directive which allows input and textArea elements to work with mat-form-field.
Simple example — output
For the moment we’ll just concentrate on using input elements but will talk about other components later on.
Using this simple example above, we get the default appearance for a mat-form-field and this appearance is called legacy. This format shows components with an underline and when data has been entered the placeholder (in this case Name) becomes a floating label. This is where the placeholder moves to the top left of the input element.
What components are supported?
What components are supported by the mat-form-field?
- Input — this is all types with the exception of file, button, checkbox, DateTime, hidden, image, radio, range, reset and submit (both native and Angular Material versions).
- Textarea
- Select — this is the native drop-down list
- Mat-select
- Mat-chip-list
- Mat-label
- Mat-suffix
- Mat-prefix
- Mat-Hint
It’s considered best practice to wrap all the above components in a mat-form-field.
Appearance Options
Let’s take a look at the appearance options for the mat-form-field.
The mat-form-field has four appearance properties, these are:
- Legacy — this is the default style.
- Standard — slightly updated version of legacy, with more spacing consistent with Fill and Outline.
- Fill — Displays a background and an underline.
- Outline — displays a line all around the component.
We can see in the image below that Legacy and Standard look very similar, this is because Standard is an updated version of Legacy.
All four appearances support placeholders, but Legacy is the only one that promotes the placeholder to a floating label [as shown below].
In the top input, we can see that the underline and the placeholder have changed colour and the word Legacy floats in the top left of the input. Standard, Fill and Outline all require a mat-label element above the input. A placeholder on Standard, Fill and Outline will never be promoted to a floating label.
Appearance Options — Legacy
Legacy: this is the default appearance when one isn’t specified. To set the appearance add the appearance property to the mat-form-field and set it to legacy (all lowercase).
On the input add the placeholder property and set this to inform the user what should be placed into this input field. This placeholder can also act as a label for the input.
Note: If a mat-label is also present (and we’ll get to these next) then the placeholder remains as a placeholder and the mat-label becomes the floating label.
Appearance Options — Standard
Standard: This is a slightly updated version of the Legacy, with more spacing and consistent with Fill and Outline. To get a floating label a mat-label is required. With this appearance, a placeholder will not be promoted to a floating label.
Appearance Options — Fill
Fill: Displays a background and an underline. To get a floating label a mat-label is required. With this appearance, a placeholder will not be promoted to a floating label.
Appearance Options — Outline
Outline: Displays a line all around the input. To get a floating label a mat-label is required. With this appearance, a placeholder will not be promoted to a floating label.
Appearance Options — Floating Label
I’ve talked about floating labels, so let’s take a look at them in more detail.
We have three options with floating labels (though only two of them work with all appearances).
In Legacy mode, when setting the [floatLabel] equal to always the floating label is present even before selecting the input. Setting this to auto will restore the default behaviour. Setting this to never, does exactly what it says, and will not promote the placeholder to a floating label.
In Standard, Fill and Outline mode, when setting the [floatLabel] equal to always the floating label is present even before selecting the input. Setting this to auto will restore the default behaviour. Setting this to never, doesn’t have an effect and the label is still promoted to floating label.
Never was only supported for Legacy and disabled for Standard, Fill, and Outline. It was originally to be used for the floating label to emulate the behaviour of a standard input placeholder, but now the form field supports floating labels and placeholders.
Floating Label — Examples
On the mat-form-field, we have set the floating label for each mat-form-field like in this example this is set to always.
Appearance Options — Required
Sometimes we need a required field, but we may have another way to visually mark the field as a required field. In case we will want to mark the input as required but hide the default asterisk. We can use the hideRequiredMarker input property for this by setting it to true.
Setting these properties does not scale well when an application has many mat-form-field components to manage. But there is an easier way and that is to set them globally.
Appearance Options — Set Globally
The appearance, floating labels and hiderRequiredMarker can all be set globally by providing a value for MAT_FORM_FIELD_DEFAULT_OPTIONS to make this global and add these to the app root module, or to a component's provider. This means that you can set your appearance, floating label and hideRequiredMarker once for the entire application (or component).
Prefix and Suffix
Custom content can be added to Prefix or Suffix content as shown in the following examples. This custom content will be placed in visual containers that wrap the control. This can be text or images.
Note: it is not recommended to use text on Fill and Outline appearances because the label and input do not have the same alignment and are therefore impossible to align.
In the example below the mat-form-field is set to the Fill appearance and no label (hence why the Placeholder is not a floating label), we have prepended the word Prefix to the start and Suffix to the end.
This example shows the misalignment between the placeholder and the Prefix/Suffix as mentioned.
Prefix and Suffix — Text
Here we can see an example of the text version of using the prefix and suffix with the appearance on the mat-form-field set to fill.
Prefix and Suffix — Image
Here we can see an example of using an image for a suffix. We add the matSuffix directive to the button tag, the button is placed in the visual containers that wrap the control. This example has a type of either text or password depending on the value of the hide variable and we are changing this on the click event to either show the password or hide it. We use a mat-icon on a button and toggle the image.
Prefix and Suffix — Mat Select with Image
To show that other controls can have Prefixes or Suffixes and not just input elements. In this example, we have a mat-select and added a mat-label that prefixes the group’s image.
In the two images, we can see what that looks like before and after selecting an item.
Hint Labels
A hint is a message that appears underneath the input component, as the name suggests this provides a hint to the user about the information required for the selected field.
There are two ways to set a hint message on a component. Firstly, on the mat-form-field itself using the hintLabel and secondly using the mat-hint tag.
Hint Messages — HintLabel
In this example, we have set the hintLabel on the mat-form-field. This label can only be left-aligned.
Hint Messages — Mat Hint
And in this example, we have set the hint message on the mat-hint tag. This label can be left or right aligned using the align property with either ‘start’ or ‘end’ as values, the default is left aligned.
Hint Messages — Character Count Example
A good example of a hint message is a character count, if you have a maximum number of characters this is a good way to inform the user how many characters have been entered.
We set a template variable on the input element, this is the variable that starts with a hash or pound sign (#), then on the mat-hint, we just need to use the template variable to obtain the length (if we have entered any characters) or set it to zero if not.
Error Messages
Displaying error messages can be quite complex, for example, you may have more than one validation on a particular input element. Angular Materials' mat-error element makes this a relatively straightforward process to decide on which error to display and to display the message itself.
In the app.component.ts file, I’ve added a form control.
To get error messages to appear we need to have an input field with a formControl property. We also need to add a formControl to the app.component.ts file and set the Validators to be required. We have to also import the FormsModule and the ReactiveFormsModule. With this all in place, we can add the mat-error element and check the “name” variable to see if this form is invalid, if it is, then we will display the error message “field is required.”.
Theming
When first installing Angular Material one of the install questions is to select either one of the four stock themes or to create a custom theme.
The four themes are:
- DeepPurple-Amber
- Indigo-Pink
- Pink-BlueGray
- Purple-Green
These themes then set up the Primary, Accent and Warn colour palettes. In the examples in this presentation, we’ve been using the Purple-green theme. Where Primary is Purple, the Accent is green and Warn is always red. You can change these colours by creating a custom theme, but that’s outside of the scope of this presentation.
Changing the colour type to Primary, Accent or Warn will set the colour of the underline and the floating label.
Theming Example
The default colour type is Primary and this will be whatever the Primary colour is set to in the theme. If for example, we change the colour to Accent or Warn then the underline, the floating label will change colour.
In the example, starting at the top is the default Primary colour, if we change the colour to Accent and finally Warn and we can see that the cursor, floating label and the underline have changed colour respectively.
If we have a placeholder and a label the placeholder remains with the default colour for the text.
If we have a required field marker on the input component, then this defaults to the Accent colour. It is possible to change the colour of the required marker using SCSS.
In this post, we have discussed what the Angular Material form-field component does and how it applies a consistent look and feel to your applications.
In this post, we also learnt about…
- How to set the appearance options.
- How to apply these changes globally and how easy it was to change the styles of all supported components.
- How to set the Required attribute.
- How to set Prefix and Suffixes.
- How to display Error messages.
- How to display Hint messages
- How to apply a theme.
Thank You
