https://github.com/piyalidas10/validation-tooltip-directive
Angular Validation Tooltip Directive
https://github.com/piyalidas10/validation-tooltip-directive
angular angular6 directive directive-angular focus javascript nativeelment renderer rendering tooltip validation validation-tooltip
Last synced: about 1 month ago
JSON representation
Angular Validation Tooltip Directive
- Host: GitHub
- URL: https://github.com/piyalidas10/validation-tooltip-directive
- Owner: piyalidas10
- Created: 2019-11-10T13:37:20.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T23:57:35.000Z (over 3 years ago)
- Last Synced: 2025-03-15T02:32:25.895Z (over 1 year ago)
- Topics: angular, angular6, directive, directive-angular, focus, javascript, nativeelment, renderer, rendering, tooltip, validation, validation-tooltip
- Language: TypeScript
- Size: 2.32 MB
- Stars: 0
- Watchers: 2
- Forks: 3
- Open Issues: 32
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Validation-Tooltip-Directive-in-Angular-6
## Live URL
https://piyalidas10.github.io/validation-tooltip-directive/
## RUN Application
```
ng serve
http://localhost:4200
```
## Mockdata
fieldInfoContent.json in assets folder
```
{
"fieldInfo": {
"firstName" : "Firstname is a required field",
"middleName": "middleName is not a required field",
"lastName" : "Lastname is a required field",
"emailId": "Email is a required field",
"mobile" : "Mobile is a required field",
"password" : "Password is a required field"
}
}
```
validation-msg.service.ts
```
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ValidationMessageService {
validationErrorObj = [];
public getValidationMsg(validationId: string): string {
return this.validationErrorObj[validationId];
}
}
```
###Load all messages from fieldInfoContent.json using the following code which is written in register.component.ts
```
validationErrorMsg() {
this.apiService.getFieldInfoMessage().then(
(res) => {
if (this.validErrorMsgService.validationErrorObj.length === 0) {
this.fieldInfoMsgArr = res['fieldInfo'];
console.log('Field Info Array => ', this.fieldInfoMsgArr);
this.isLoading = false;
}
}, (error) => {
console.log(error);
this.isLoading = false;
});
}
```
Now i have to create a directive validation-label.directive.ts will run on the status change of the form control elements. It requires a ‘formControlName’ attribute added to the control. This will be used to used to construct the key that will be passed to the validation service class. The above directive will handle the change/blur events on controls and displays the messages accordingly.