NgxFormControlMessages
- Angular 15: v1.0.3
- Angular 16: v1.1.1
NgxFormControlMessages is a component used to show a FormField
or FormGroup
error messages without repeating yourself accross the application.
Usage
The examples below use Angular Material components but ngx-form-control-messages
can work with any library or custom design. The component only handles the text content and has no design requirements.
Default error messages
<form [formGroup]="form">
<mat-form-field>
<mat-label>Email</mat-label>
<input matInput type="email" formControlName="email" required>
<mat-error>
<ngx-form-control-messages [field]="form.controls.email"></ngx-form-control-messages>
</mat-error>
</mat-form-field>
</form>
Custom error messages
<form [formGroup]="form">
<mat-form-field>
<mat-label>Password</mat-label>
<input matInput type="password" formControlName="password" required>
<mat-error>
<ngx-form-control-messages [field]="form.controls.password" [messages]="customErrors"></ngx-form-control-messages>
</mat-error>
</mat-form-field>
</form>
With customErrors
defined in the component's Typescript file:
customErrors: { [key: string]: string } = {
passwordStrength: 'Password must be at least 10 characters long'
};
Filtering/Sorting errors
By default, the component will select the first error found for the field. The handledErrors
property allows you to filter messages and/or manually select which message is the most important to show. Be aware that you have to set an exhaustive list of the errors you want to handle if you use this property.
<form [formGroup]="form">
<mat-form-field>
<mat-label>Some custom field</mat-label>
<input matInput formControlName="customField" required>
<mat-error>
<ngx-form-control-messages [field]="form.controls.password" [messages]="customErrors" [handledErrors]=['required', 'customError']></ngx-form-control-messages>
</mat-error>
</mat-form-field>
</form>
Configuration
The component isn't preconfigured with default messages, you have to configure your own when importing the module:
/* ... */
import { NgxFormControlMessagesModule, NgxFormControlMessages } from '@varrmcault/ngx-form-control-messages';
const defaultMessages: NgxFormControlMessages = {
required: 'Field required',
email: 'Invalid email',
/* ... */
};
@NgModule({
/* ... */
imports: [
/* ... */
NgxFormControlMessagesModule.forRoot(defaultMessages)
]
})
export class AppModule { }