changes

Author: piyalidas10

.gitignore

@@ -8,6 +8,7 @@
 # dependencies
 /node_modules
 
+
 # IDEs and editors
 /.idea
 .project
@@ -33,6 +34,8 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
+*.webm
+*.vlc
 
 # System Files
 .DS_Store

README.md

@@ -1,36 +1,24 @@
-# Validation-Directive-in-Angular-6
+# Validation-Tooltip-Directive-in-Angular-6
 
 ## RUN Application
 
 ```
-ng serve --port 4201
-http://localhost:4201
+ng serve
+http://localhost:4200
 ```
 
 ## Mockdata
-validationerrors.json in assets folder
+fieldInfoContent.json in assets folder
 
 ```
 {
-    "validationErrors": {
-        "firstName-required" : "Firstname is a required field",
-        "firstName-minlength" : "Firstname must have 2 characters",
-        "firstName-maxlength" : "Firstname can have maximum 30 characters",
-
-        "lastName-required" : "Lastname is a required field",
-        "lastName-minlength" : "Lastname must have 2 characters",
-        "lastName-maxlength" : "Lastname can have maximum 30 characters",
-
-        "emailId-required": "Email is a required field",
-        "emailId-email": "Email is not in valid format",
-        "emailId-minlength" : "Email must have 6 characters",
-
-        "mobile-required" : "Mobile is a required field",
-        "mobile-minlength" : "Mobile must have 10 characters",
-
-        "password-required" : "Password is a required field",
-        "password-minlength" : "Password must have 6 characters",
-        "password-maxlength" : "Password can have maximum 20 characters"
+    "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"
     }
 }
 ```
@@ -52,22 +40,22 @@ export class ValidationMessageService {
 }
 ```
 
-###Load all messages from validationerrors.json using the following code which is written in register.component.ts
+###Load all messages from fieldInfoContent.json using the following code which is written in register.component.ts
 
 ```
 validationErrorMsg() {
-    this.apiService.getValidationErrorMessage().then(
-      (res) => {
-        if (this.validErrorMsgService.validationErrorObj.length === 0) {
-          this.validErrorMsgService.validationErrorObj = res['validationErrors'];
-          console.log('Validation Error => ', this.validErrorMsgService.validationErrorObj);
-        }
-      }, (error) => {
-        this.errorData = this.sharedService.getErrorKeys(error.statusText);
-      });
+  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.
-
-Few things to notice in this class are that I defined ‘statusChangeSubscription’ to listen to status changes on the control and remove/add error message depending on the status (INVALID). Also we unsubscribe it on destroy class. And I defined a helper method to construct the message key, get the error message from service class and display it on the view.

dist/validation-tooltip/3rdpartylicenses.txt

@@ -8,8 +8,8 @@
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
-</head>
+<link rel="stylesheet" href="styles.0a33fa57bcd5629c58f5.css"></head>
 <body>
   <app-root></app-root>
-<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script></body>
+<script type="text/javascript" src="runtime.a66f828dca56eeb90e02.js"></script><script type="text/javascript" src="polyfills.2f4a59095805af02bd79.js"></script><script type="text/javascript" src="main.d120d507a5b3bad5a176.js"></script></body>
 </html>