validation tooltip directive

Author: piyalidas10

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "project8": {
+    "validation-tooltip": {
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
@@ -13,7 +13,7 @@
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
           "options": {
-            "outputPath": "dist/project8",
+            "outputPath": "dist/validation-tooltip",
             "index": "src/index.html",
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
@@ -50,18 +50,18 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "project8:build"
+            "browserTarget": "validation-tooltip:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "project8:build:production"
+              "browserTarget": "validation-tooltip:build:production"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "project8:build"
+            "browserTarget": "validation-tooltip:build"
           }
         },
         "test": {
@@ -95,19 +95,19 @@
         }
       }
     },
-    "project8-e2e": {
+    "validation-tooltip-e2e": {
       "root": "e2e/",
       "projectType": "application",
       "architect": {
         "e2e": {
           "builder": "@angular-devkit/build-angular:protractor",
           "options": {
             "protractorConfig": "e2e/protractor.conf.js",
-            "devServerTarget": "project8:serve"
+            "devServerTarget": "validation-tooltip:serve"
           },
           "configurations": {
             "production": {
-              "devServerTarget": "project8:serve:production"
+              "devServerTarget": "validation-tooltip:serve:production"
             }
           }
         },
@@ -123,5 +123,5 @@
       }
     }
   },
-  "defaultProject": "project8"
+  "defaultProject": "validation-tooltip"
 }

e2e/src/app.e2e-spec.ts

@@ -9,6 +9,6 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getParagraphText()).toEqual('Welcome to project8!');
+    expect(page.getParagraphText()).toEqual('Welcome to validation-tooltip!');
   });
 });

package-lock.json

@@ -1,5 +1,5 @@
 {
-  "name": "project8",
+  "name": "validation-tooltip",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",

package.json

@@ -10,13 +10,32 @@ export class ApiService {
     private http: HttpClient
   ) { }
 
+/**
+   * Get Form content
+  */
+ getFormContent() {
+  // tslint:disable-next-line:no-shadowed-variable
+ const promise = new Promise((resolve, reject) => {
+   const apiURL = 'http://localhost:4200/assets/formcontent.json';
+   return this.http.get<{frcontent: any}>(apiURL).toPromise().then(
+     res => {
+       resolve(res);
+     },
+     msg => {
+       reject(msg);
+     }
+   );
+ });
+ return promise;
+}
+
    /**
-   * Get Form validation error message
+   * Get Field Info message
   */
- getValidationErrorMessage() {
+ getFieldInfoMessage() {
   // tslint:disable-next-line:no-shadowed-variable
  const promise = new Promise((resolve, reject) => {
-   const apiURL = 'http://localhost:4201/assets/validationerrors.json';
+   const apiURL = 'http://localhost:4200/assets/fieldInfoContent.json';
    return this.http.get<{vlderrors: any}>(apiURL).toPromise().then(
      res => {
        resolve(res);

src/app/api.service.ts

@@ -0,0 +1,13 @@
+.globalError{
+    position: fixed;
+    width: 100%;
+    top: 0;
+    background: #ffffff;
+    text-align: center;
+}
+.globalError p{
+    margin: 10px 0;
+}
+.globalError p a{
+    font-weight: bold;
+}

src/app/app.component.css

@@ -1,3 +1,6 @@
 <!--The content below is only a placeholder and can be replaced.-->
-<app-register></app-register>
+<div class="globalError" *ngIf="isGlobalError">
+    <p>To register, please fill up <a href="javascript:void(0);" (click)="goToField()">{{errorsObj.length}}</a> fields.</p>
+</div>
+<app-register (formErrorsCount)='formErrorsEvent($event)'></app-register>
 

src/app/app.component.html

@@ -22,6 +22,6 @@ describe('AppComponent', () => {
     const fixture = TestBed.createComponent(AppComponent);
     fixture.detectChanges();
     const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain('Welcome to project8!');
+    expect(compiled.querySelector('h1').textContent).toContain('Welcome to validation-tooltip!');
   }));
 });

src/app/app.component.spec.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'app-root',
@@ -7,4 +7,29 @@ import { Component } from '@angular/core';
 })
 export class AppComponent {
   title = 'app';
+  errorsObj: any;
+  isGlobalError = false;
+  globalErrorTimer: any;
+
+  constructor(private el: ElementRef) {
+  }
+
+  formErrorsEvent(evt) {
+    this.errorsObj = evt;
+    console.log('formErrorsArr => ', this.errorsObj);
+    if (this.errorsObj.length > 0) {
+      this.isGlobalError = true;
+      window.scrollTo(0, 0);
+      this.globalErrorTimer = setTimeout( () => {
+        console.log(this.el.nativeElement.querySelector('.globalError'));
+        this.el.nativeElement.querySelector('.globalError').focus();
+      }, 0);
+    }
+  }
+
+  goToField() {
+    console.log(this.el.nativeElement);
+    this.el.nativeElement.querySelector('#' + this.errorsObj[0].fieldName).focus();
+  }
+
 }

src/app/app.component.ts

@@ -1,5 +1,5 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 
 import { AppComponent } from './app.component';
 import { RegisterComponent } from './register/register.component';
@@ -22,6 +22,7 @@ import { ValidationLabelDirective } from './validation-label.directive';
     HttpClientModule
   ],
   providers: [],
+  schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
   bootstrap: [AppComponent]
 })
 export class AppModule { }