@ildug/ngx-errors
v2.5.1
Published
Form errors display directives for Angular
Downloads
18
Readme
ngx-errors
Form errors display directives for Angular.
Updated to Angular 18.
try a demo
Install
Install via package manager or fork this project ("projects/ngx-errors/src")
NPM
npm install @ildug/ngx-errors
Usage in angular app
Import the module in your angular component. In your module app.module.ts
...
@Component({
...,
standalone: true,
imports: [..., ReactiveFormsModule, NgxErrorsModule],
...
})
export class AppComponent {
form = new FormGroup({
"email": new FormControl(null, [Validators.required, Validators.email])
});
}
Form errors display
Add the directive to an element where errors will be diplayed.
dagErrors is the name of the reference input element.
dagError is the error name issued by Angular Validator
when indicates when the error message will be shown.
In my.component.html
<form [formGroup]="form" >
...
<div class="my-input-container">
<input type="email" formControlName="email">
<div dagErrors="email" class="error">
<div dagError="required" when="touched"> Please, insert a value</div>
<div dagError="email" when="touched"> Ops, incorrect email format</div>
<div dagError="otherError" [when]="[dirty, pristine]"> always show this message when otherError is present</div>
</div>
</div>
...
</form>