ngx-error
A declarative validation errors module for reactive forms.
Overview
Why use ngx-error, how to install and use.
What is it?
Declarative validation error messages for reactive forms.
Typically you'd do something like this:
<!-- without ngxError --><input type="text" formControlName="foo"> <div *ngIf="form.get('foo').hasError('required') && form.get('foo').touched"> Field is required</div><div *ngIf="form.get('foo').hasError('minlength') && form.get('foo').dirty"> Min length is 5</div>
With ngxError, we've taken a simple declarative approach that cleans up your templates to make validation easier:
<!-- with ngxErrors --><input type="text" formControlName="foo"> <div #input="ngxErrors" ngxErrors="foo"> <div *ngxError="'required'; when:'touched'"> Field is required </div> <div *ngxError="'minlength'; when:'touched'"> Min length is 5 </div> </div>
Check out the documentation below for all the syntax we provide.
Installation
yarn add ngx-error # OR npm install --save ngx-error
Setup
Just add ngx-error to your module:
; @
Documentation
ngxErrors
The ngxError
directive works by dynamically fetching your FormControl under-the-hood, so simply take your formControlName
value and pass it into ngxErrors
:
// ...
This needs to be on a parent container that will encapsulate child *ngxError
directives.
ngxError
The *ngxError
directive takes either a string
or array
as arguments. The argument you pass in corresponds to any active errors exposed on your control, such as "required" or "minlength":
Min length is 5
ngxError #when
The when
option takes either a string
or array
as arguments. It allows you to specify when you wish to display the error based on the control state, such as "dirty" or "touched":
Min length is 5
It also comes in array format for multiple rules:
Min length is 5
Nested FormGroup support
ngxErrors also supports FormGroups with control names using dot notation:
Min length is 5
Exported Directive API
ngx-error exports itself as ngxErrors
, which means you can access information about your control error states elsewhere in your template using a template reference, such as #foo
.
Basic usage:
getError(name: string): any;
The getError
method returns the object associated with your error. This can be useful for dynamically displaying error rules.
Example: Adds
Min length is 5
when value is less than 5 characters (based onValidators.minLength(5)
).
Min length should be {{ myError.getError('minlength')?.requiredLength }}
The error returned is identical to Angular's FormControl API
hasError(name: string, conditions?: string | string[]): boolean;
The hasError
method informs you if your control has the given error. This can be useful for styling elsewhere in your template based off the control's error state.
Example: Adds
class="required"
when "myError" has therequired
error.
Field is required
You can optionally pass in conditions in which to activate the error.
Example: Adds
class="required"
when "myError" has therequired
error and the states are'dirty'
and'touched'
.
Field is required
You can also use the "catch-all" selector to get the state of your entire control's validity, alongside on an optional state collection.
Field is required
isValid(name: string, conditions?: string | string[]): boolean;
The isValid
method informs you if a your control is valid, or a property is valid. This can be useful for styling elsewhere in your template based off the control's validity state.
Example: Adds
class="valid"
when "myError" has norequired
error.
Field is required
You can optionally pass in conditions in which to evaluate alongside the property you're checking is valid.
Example: Adds
class="valid"
when "myError" has norequired
error and the states are'dirty'
and'touched'
.
Field is required
You can also use the "catch-all" selector to check if the control is valid, with no specific error properties, alongside on an optional state collection.
Field is required
hasErrors: boolean;
The hasErrors
property returns true
if your control has any number of errors. This can be useful for styling elsewhere in your template on a global control level rather than individual errors.
Example: Adds
class="errors"
when "myError" has any errors.
Field is required Min length is 5
The errors returned are identical to Angular's FormControl API