Feature/ng10 (#11)

feature(npm-updates\angular-10\form-validator): upgrade for node & angular packages, upgrade to angular 10, and fix for form-validator to allow deep properties

Author: shy2net

angular-src/angular.json

@@ -19,6 +19,9 @@
             "main": "src/main.ts",
             "polyfills": "src/polyfills.ts",
             "tsConfig": "src/tsconfig.app.json",
+            "allowedCommonJsDependencies": [
+              "validator"
+            ],
             "assets": [
               "src/favicon.ico",
               "src/assets"

angular-src/e2e/tsconfig.e2e.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "module": "commonjs",

angular-src/package-lock.json

@@ -15,26 +15,26 @@
     "dev:ssr": "ng run angular-src:serve-ssr",
     "serve:ssr": "node dist/server/main.js",
     "build:ssr": "ng build --prod && ng run angular-src:server:production",
-    "prerender": "ng run angular-src:prerender"
+    "prerender": "ng run angular-src:prerender",
+    "postinstall": "./node_modules/.bin/ngcc --tsconfig=src/tsconfig.app.json"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^9.1.11",
-    "@angular/common": "^9.1.11",
-    "@angular/compiler": "^9.1.11",
-    "@angular/core": "^9.1.11",
-    "@angular/forms": "^9.1.11",
-    "@angular/http": "^7.2.16",
-    "@angular/platform-browser": "^9.1.11",
-    "@angular/platform-browser-dynamic": "^9.1.11",
-    "@angular/platform-server": "^9.1.11",
-    "@angular/router": "^9.1.11",
-    "@fortawesome/fontawesome-free": "^5.13.1",
+    "@angular/animations": "^10.0.8",
+    "@angular/common": "^10.0.8",
+    "@angular/compiler": "^10.0.8",
+    "@angular/core": "^10.0.8",
+    "@angular/forms": "^10.0.8",
+    "@angular/platform-browser": "^10.0.8",
+    "@angular/platform-browser-dynamic": "^10.0.8",
+    "@angular/platform-server": "^10.0.8",
+    "@angular/router": "^10.0.8",
+    "@fortawesome/fontawesome-free": "^5.14.0",
     "@ng-toolkit/universal": "^8.1.0",
     "@nguniversal/express-engine": "^9.1.1",
     "@ngx-loading-bar/core": "^4.2.0",
     "angularx-social-login": "^2.3.1",
-    "bootstrap": "^4.5.0",
+    "bootstrap": "^4.5.2",
     "bootstrap-social": "^5.1.1",
     "class-transformer": "^0.2.3",
     "class-transformer-validator": "^0.8.0",
@@ -47,39 +47,39 @@
     "ngx-toastr": "^11.3.3",
     "popper.js": "^1.16.1",
     "roboto-fontface": "^0.10.0",
-    "rxjs": "^6.5.5",
+    "rxjs": "^6.6.2",
     "tether": "^1.4.7",
     "ts-loader": "6.2.1",
-    "tslib": "^1.13.0",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.9",
-    "@angular/cli": "^9.1.9",
-    "@angular/compiler-cli": "^9.1.11",
-    "@angular/language-service": "^9.1.11",
+    "@angular-devkit/build-angular": "^0.1000.5",
+    "@angular/cli": "^10.0.5",
+    "@angular/compiler-cli": "^10.0.8",
+    "@angular/language-service": "^10.0.8",
     "@nguniversal/builders": "^9.1.1",
-    "@types/express": "^4.17.6",
+    "@types/express": "^4.17.7",
     "@types/faker": "^4.1.12",
-    "@types/jasmine": "^3.5.10",
+    "@types/jasmine": "^3.5.12",
     "@types/jasminewd2": "~2.0.8",
-    "@types/node": "^13.13.12",
-    "codelyzer": "^5.2.2",
+    "@types/node": "^13.13.15",
+    "codelyzer": "^6.0.0",
     "faker": "^4.1.0",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.4.1",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~2.1.1",
-    "karma-jasmine": "^3.1.1",
-    "karma-jasmine-html-reporter": "^1.5.4",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~3.3.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
     "karma-junit-reporter": "^2.0.1",
     "karma-mocha-reporter": "^2.2.5",
     "node-sass": "^4.14.1",
-    "protractor": "^5.4.4",
+    "protractor": "~7.0.0",
     "ts-node": "~8.6.2",
-    "tslint": "~6.0.0",
-    "typescript": "~3.7.5",
+    "tslint": "~6.1.0",
+    "typescript": "~3.9.7",
     "webpack-cli": "^3.3.12"
   }
 }

angular-src/package.json

@@ -1,7 +1,8 @@
 import { validate, ValidationError } from 'class-validator';
 
 import {
-    AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges
+    AfterViewInit, Directive, ElementRef, EventEmitter, Input, OnChanges, OnDestroy, Output,
+    SimpleChanges
 } from '@angular/core';
 
 /**
@@ -11,13 +12,7 @@ import {
 @Directive({
   selector: '[appFormValidator]',
 })
-export class FormValidatorDirective implements AfterViewInit, OnChanges {
-  /**
-   * A class-validator implemented object, which is used to validate the fields in the form.
-   *
-   * @type {*}
-   * @memberof FormValidatorDirective
-   */
+export class FormValidatorDirective implements AfterViewInit, OnChanges, OnDestroy {
   @Input() appFormValidator: any;
   /**
    *Hides all of the form validation errors text.
@@ -36,6 +31,32 @@ export class FormValidatorDirective implements AfterViewInit, OnChanges {
     return this._isFormValid;
   }
 
+  private getValidationErrorFromFieldName(
+    name: string,
+    validationErrors: ValidationError[]
+  ): ValidationError {
+    let lastValidationError: ValidationError = null;
+
+    // We split using '-' which represents a deeper property
+    const split = name.split('-');
+
+    while (true) {
+      const property = split.shift();
+
+      if (lastValidationError)
+        lastValidationError = lastValidationError.children.find((v) => v.property === property);
+      else lastValidationError = validationErrors.find((v) => v.property === property);
+
+      // If no validation error was found, return null
+      if (!lastValidationError) return;
+
+      // Update the last validation error
+
+      // If it's the end of the field name, return the validation error
+      if (split.length === 0) return lastValidationError;
+    }
+  }
+
   /**
    * Called each time the form is completely valid or invalid.
    *
@@ -59,6 +80,14 @@ export class FormValidatorDirective implements AfterViewInit, OnChanges {
   }
 
   ngAfterViewInit(): void {
+    this.attachEventListeners();
+    this.updateForm();
+  }
+
+  /**
+   * Get all of the form group inputs, and listen to all of the input events.
+   */
+  attachEventListeners() {
     // Get all of the form group inputs
     this.getFormGroupInputs().forEach((input: HTMLInputElement) => {
       // Detect when a value was changed in one of the fields
@@ -72,8 +101,23 @@ export class FormValidatorDirective implements AfterViewInit, OnChanges {
         input.parentElement.appendChild(div);
       } else next.classList.add('input-description-validation');
     });
+  }
 
-    this.updateForm();
+  /**
+   * Removes all of the form group input listeners.
+   */
+  detachEventListeners() {
+    this.getFormGroupInputs().forEach((input: HTMLInputElement) => {
+      input.removeEventListener('input', this.inputValueChangeEventFunc);
+    });
+  }
+
+  /**
+   * Removes the attached event listeners, and re-attaches to them.
+   */
+  reattachEventListeners() {
+    this.detachEventListeners();
+    this.attachEventListeners();
   }
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -117,22 +161,18 @@ export class FormValidatorDirective implements AfterViewInit, OnChanges {
    * Goes through all of the form and checks for any issues, updates all of the fields accordingly.
    */
   updateForm(): Promise<boolean> {
-    const prevIsFormValid = this._isFormValid;
+    return validate(this.appFormValidator).then((validationErrors) => {
+      const prevIsFormValid = this._isFormValid;
+      this._isFormValid = true;
 
-    return validate(this.appFormValidator).then((results) => {
-      let errorsFound = 0;
       this.getFormGroupInputs().forEach((input: HTMLInputElement) => {
         const name = input.name;
-        const validationError = results.find((result) => result.property === name);
+        const validationError = this.getValidationErrorFromFieldName(name, validationErrors);
         this.updateFormField(input, validationError);
 
-        if (validationError) errorsFound += 1;
+        if (validationError) this._isFormValid = false;
       });
 
-      // Form is only valid if no errors were found
-      this._isFormValid = errorsFound === 0;
-
-      // Check if the form validation state was changed
       if (prevIsFormValid !== this._isFormValid)
         this.appFormValidatorIsFormValidChange.emit(this._isFormValid);
 
@@ -147,4 +187,8 @@ export class FormValidatorDirective implements AfterViewInit, OnChanges {
     const formElement = this.elementRef.nativeElement;
     return formElement.querySelectorAll('.form-group>input');
   }
+
+  ngOnDestroy(): void {
+    this.detachEventListeners();
+  }
 }

angular-src/src/browserslist renamed to angular-src/src/.browserslistrc

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
     "types": [],

angular-src/src/app/shared/directives/form-validator.directive.ts

@@ -2,10 +2,10 @@
   "extends": "./tsconfig.app.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "module": "commonjs",
     "types": [
       "node"
-    ],
+    ],    "target": "es2016"
+,
   },
   "angularCompilerOptions": {
     "entryModule": "app/app.server.module#AppServerModule"

angular-src/src/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.json",
+  "extends": "../tsconfig.base.json",
   "compilerOptions": {
     "outDir": "../out-tsc/spec",
     "types": [

angular-src/src/tsconfig.server.json

@@ -0,0 +1,32 @@
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "module": "es2020",
+    "outDir": "./dist/out-tsc",
+    "sourceMap": true,
+    "declaration": false,
+    "moduleResolution": "node",
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "target": "es5",
+    "typeRoots": [
+      "node_modules/@types"
+    ],
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "paths": {
+      "@services": [
+        "src/app/core/services/index.ts"
+      ],
+      "@core/*": [
+        "src/app/core/*"
+      ],
+      "@shared/*": [
+        "src/app/shared/*"
+      ]
+    }
+  }
+}