https://github.com/venipa/ngx-formcontrol-errors-async
https://github.com/venipa/ngx-formcontrol-errors-async
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/venipa/ngx-formcontrol-errors-async
- Owner: Venipa
- License: mit
- Created: 2021-03-10T18:35:09.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2021-03-10T19:06:21.000Z (about 4 years ago)
- Last Synced: 2025-01-08T21:55:57.695Z (4 months ago)
- Language: TypeScript
- Homepage: https://npmjs.com/package/ngx-formcontrol-errors-async
- Size: 173 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# AsyncFormControlErrors
Handle your form control errors like a champ.
Async is the way!!!
# Example
We recommend using [@angular/material](https://material.angular.io/) for using this Library but its optional
```typescript
import { Component, OnInit } from "@angular/core";
import { FormGroup, FormControl, Validators } from "@angular/forms";
import {
prepareFormErrorObservables,
useFormErrorObservable
} from "ngx-formcontrol-errors-async";
@prepareFormErrorObservables()
@Component({
selector: "app-test-async-controls",
template: `
{{ error.content | translate }}
{{ error.content | translate }}
`,
})
export class TestAsyncControlsComponent implements OnInit {
group = new FormGroup({
name: new FormControl("", [Validators.required, Validators.minLength(3)]),
description: new FormControl("", [
Validators.required,
Validators.maxLength(255),
]),
});
constructor() {}
ngOnInit(): void {}
getErrorObservable(controlName: string) {
return useFormErrorObservable(this)(
controlName,
() => this.group.controls[controlName],
{
required: (error, ctrl) => ({
content: `The ${controlName} field is required`,
}),
minLength: (error, ctrl) => ({
content: `The ${controlName} must be greater than or equal ${error.requiredLength} characters.`,
}),
maxLength: (error, ctrl) => ({
content: `The ${controlName} must be less than ${error.requiredLength} characters`,
}),
}
);
}
}
```