fix(lib): support of reactive forms #99 #65

Author: AnthonyNahas

package-lock.json

@@ -34,60 +34,60 @@
   "private": true,
   "dependencies": {
     "@agm/core": "^1.1.0",
-    "@angular/animations": "~9.1.7",
-    "@angular/cdk": "^9.0.1",
-    "@angular/common": "~9.1.7",
-    "@angular/compiler": "~9.1.7",
-    "@angular/core": "~9.1.7",
-    "@angular/flex-layout": "^9.0.0-beta.29",
-    "@angular/forms": "~9.1.7",
-    "@angular/material": "^9.1.3",
-    "@angular/platform-browser": "~9.1.7",
-    "@angular/platform-browser-dynamic": "~9.1.7",
-    "@angular/platform-server": "~9.1.7",
-    "@angular/router": "~9.1.7",
+    "@angular/animations": "^9.1.11",
+    "@angular/cdk": "^9.2.4",
+    "@angular/common": "^9.1.11",
+    "@angular/compiler": "^9.1.11",
+    "@angular/core": "^9.1.11",
+    "@angular/flex-layout": "^9.0.0-beta.31",
+    "@angular/forms": "^9.1.11",
+    "@angular/material": "^9.2.4",
+    "@angular/platform-browser": "^9.1.11",
+    "@angular/platform-browser-dynamic": "^9.1.11",
+    "@angular/platform-server": "^9.1.11",
+    "@angular/router": "^9.1.11",
     "@briebug/jest-schematic": "^2.1.1",
-    "@nguniversal/express-engine": "^9.0.2",
+    "@nguniversal/express-engine": "^9.1.1",
     "angular-cli-ghpages": "^0.6.2",
     "angulartics2": "^8.3.0",
     "express": "^4.15.2",
-    "http-server": "^0.12.1",
+    "http-server": "^0.12.3",
     "ngx-markdown": "^8.2.2",
-    "rxjs": "~6.5.4",
-    "tslib": "^1.11.1",
+    "rxjs": "^6.5.5",
+    "tslib": "^1.13.0",
     "zone.js": "^0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.901.6",
-    "@angular-devkit/build-ng-packagr": "~0.901.6",
-    "@angular/cli": "~9.1.6",
-    "@angular/compiler-cli": "~9.1.7",
-    "@angular/language-service": "~9.1.7",
+    "@angular-devkit/build-angular": "^0.901.8",
+    "@angular-devkit/build-ng-packagr": "^0.901.8",
+    "@angular/cli": "^9.1.8",
+    "@angular/compiler-cli": "^9.1.11",
+    "@angular/language-service": "^9.1.11",
     "@compodoc/compodoc": "^1.1.11",
-    "@nguniversal/builders": "^9.0.2",
-    "@release-it/conventional-changelog": "^1.1.0",
-    "@schematics/angular": "^9.0.7",
+    "@nguniversal/builders": "^9.1.1",
+    "@release-it/conventional-changelog": "^1.1.4",
+    "@schematics/angular": "^9.1.8",
     "@schematics/update": "^0.900.7",
-    "@types/express": "^4.17.3",
-    "@types/googlemaps": "^3.39.3",
-    "@types/jasmine": "^3.5.9",
+    "@types/express": "^4.17.6",
+    "@types/googlemaps": "^3.39.7",
+    "@types/jasmine": "^3.5.10",
     "@types/jasminewd2": "~2.0.3",
     "@types/jest": "25.1.2",
-    "@types/node": "^12.12.30",
-    "codelyzer": "^5.1.2",
+    "@types/node": "^12.12.47",
+    "codelyzer": "^5.2.2",
     "commitplease": "^3.2.0",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
     "jest": "25.1.0",
     "jest-preset-angular": "8.0.0",
-    "ng-packagr": "^9.0.3",
-    "protractor": "~5.4.3",
+    "ng-packagr": "^9.1.5",
+    "protractor": "^5.4.4",
     "release-it": "^12.6.3",
-    "ts-loader": "^6.2.1",
+    "ts-loader": "^6.2.2",
     "ts-node": "~8.6.2",
     "tslint": "~6.0.0",
     "typescript": "~3.7.5",
-    "webpack-bundle-analyzer": "^3.6.1",
+    "webpack-bundle-analyzer": "^3.8.0",
     "webpack-cli": "^3.3.11"
   },
   "greenkeeper": {

package.json

@@ -1,16 +1,10 @@
-import { Tree } from '@angular-devkit/schematics';
+import {Tree} from '@angular-devkit/schematics';
 import {
-  getSourceFile as originalGetSourceFile,
-  addModuleImportToRootModule as originalAddModuleImportToRootModule,
   addModuleImportToModule as originalAddModuleImportToModule,
-  typescript
+  addModuleImportToRootModule as originalAddModuleImportToRootModule,
 } from '@angular/cdk/schematics';
-import { WorkspaceProject } from '@angular-devkit/core/src/experimental/workspace';
+import {WorkspaceProject} from '@angular-devkit/core/src/experimental/workspace';
 
-/** Reads file given path and returns TypeScript source file. */
-export function getSourceFile(host: Tree, path: string): typescript.SourceFile {
-  return originalGetSourceFile(host, path);
-}
 
 /** Import and add module to root app module. */
 export function addModuleImportToRootModule(host: Tree, moduleName: string, src: string, project: WorkspaceProject) {

projects/angular-material-extensions/google-maps-autocomplete/schematics/helpers/material/ast.ts

@@ -1,5 +1,5 @@
-import {Component, ElementRef, EventEmitter, Input, NgZone, OnInit, Output, ViewChild} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {Component, ElementRef, EventEmitter, forwardRef, Input, NgZone, OnInit, Output, ViewChild} from '@angular/core';
+import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
 import {MapsAPILoader} from '@agm/core';
 import {MatValidateAddressDirective} from '../directives/address-validator/mat-address-validator.directive';
 import {Location} from '../interfaces/location.interface';
@@ -18,9 +18,16 @@ export enum Appearance {
   selector: 'mat-google-maps-autocomplete',
   exportAs: 'matGoogleMapsAutocomplete',
   templateUrl: './mat-google-maps-autocomplete.component.html',
-  styleUrls: ['./mat-google-maps-autocomplete.component.scss']
+  styleUrls: ['./mat-google-maps-autocomplete.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MatGoogleMapsAutocompleteComponent),
+      multi: true
+    }
+  ]
 })
-export class MatGoogleMapsAutocompleteComponent implements OnInit {
+export class MatGoogleMapsAutocompleteComponent implements OnInit, ControlValueAccessor {
 
   @ViewChild('search')
   public searchElementRef: ElementRef;
@@ -74,6 +81,9 @@ export class MatGoogleMapsAutocompleteComponent implements OnInit {
   @Output()
   onLocationSelected: EventEmitter<Location> = new EventEmitter<Location>();
 
+  value: PlaceResult;
+
+
   private onNewPlaceResult: EventEmitter<any> = new EventEmitter();
   private addressValidator: MatValidateAddressDirective = new MatValidateAddressDirective();
 
@@ -82,6 +92,9 @@ export class MatGoogleMapsAutocompleteComponent implements OnInit {
     this.addressValidator.validate()])
   );
 
+  propagateChange = (_: any) => {
+  };
+
   constructor(private mapsAPILoader: MapsAPILoader,
               private ngZone: NgZone) {
   }
@@ -174,6 +187,8 @@ export class MatGoogleMapsAutocompleteComponent implements OnInit {
             } else {
               // show dialog to select a address from the input
               // emit failed event
+              this.value = place;
+              this.propagateChange(this.value)
             }
             this.address = place.formatted_address;
             this.onAutocompleteSelected.emit(place);
@@ -199,4 +214,22 @@ export class MatGoogleMapsAutocompleteComponent implements OnInit {
     this.addressSearchControl.updateValueAndValidity();
   }
 
+  writeValue(obj: any): void {
+    if (obj) {
+      this.value = obj;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+    throw new Error('Method not implemented.');
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    throw new Error('Method not implemented.');
+  }
+
 }

projects/angular-material-extensions/google-maps-autocomplete/src/lib/component/mat-google-maps-autocomplete.component.ts

@@ -1,5 +1,5 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
-import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {Component, EventEmitter, forwardRef, Input, OnInit, Output} from '@angular/core';
+import {ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
 
 import {parseGermanAddress} from '../../helpers/parser';
 import {GermanAddress} from '../../interfaces';
@@ -10,9 +10,16 @@ import {InputAnimations} from '../../animations';
   selector: 'mat-search-google-maps-autocomplete',
   templateUrl: './mat-search-google-maps-autocomplete.component.html',
   styleUrls: ['./mat-search-google-maps-autocomplete.component.scss'],
-  animations: InputAnimations
+  animations: InputAnimations,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MatSearchGoogleMapsAutocompleteComponent),
+      multi: true
+    }
+  ]
 })
-export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
+export class MatSearchGoogleMapsAutocompleteComponent implements OnInit, ControlValueAccessor {
 
   @Input()
   appearance: string | Appearance = Appearance.STANDARD;
@@ -69,6 +76,8 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
   germanAddress: GermanAddress;
   addressFormGroup: FormGroup;
 
+  propagateChange = (_: any) => {
+  };
 
   constructor(private formBuilder: FormBuilder) {
   }
@@ -111,7 +120,25 @@ export class MatSearchGoogleMapsAutocompleteComponent implements OnInit {
       this.addressFormGroup.get('locality.long').patchValue(germanAddress.locality.long);
     }
 
+    this.value = germanAddress;
+    this.propagateChange(this.value);
     this.onGermanAddressMapped.emit(germanAddress);
   }
 
+  writeValue(obj: any): void {
+    if (obj) {
+      this.value = obj;
+    }
+  }
+
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+  }
+
 }

projects/angular-material-extensions/google-maps-autocomplete/src/lib/component/mat-search-google-maps-autocomplete/mat-search-google-maps-autocomplete.component.ts

@@ -1,5 +1,5 @@
-import {Directive, ElementRef, EventEmitter, Inject, Input, NgZone, OnInit, Output, PLATFORM_ID} from '@angular/core';
-import {FormControl, Validators} from '@angular/forms';
+import {Directive, ElementRef, EventEmitter, forwardRef, Inject, Input, NgZone, OnInit, Output, PLATFORM_ID} from '@angular/core';
+import {ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, Validators} from '@angular/forms';
 import {MatValidateAddressDirective} from '../directives/address-validator/mat-address-validator.directive';
 import {MapsAPILoader} from '@agm/core';
 import {Location} from '../interfaces/location.interface';
@@ -11,8 +11,15 @@ import AutocompleteOptions = google.maps.places.AutocompleteOptions;
 @Directive({
   selector: '[matGoogleMapsAutocomplete]',
   exportAs: 'matGoogleMapsAutocomplete',
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => MatGoogleMapsAutocompleteDirective),
+      multi: true
+    }
+  ]
 })
-export class MatGoogleMapsAutocompleteDirective implements OnInit {
+export class MatGoogleMapsAutocompleteDirective implements OnInit, ControlValueAccessor {
 
   @Input()
   address: PlaceResult | string;
@@ -47,6 +54,8 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit {
   @Output()
   onLocationSelected: EventEmitter<Location> = new EventEmitter<Location>();
 
+  value: PlaceResult;
+
   private onNewPlaceResult: EventEmitter<any> = new EventEmitter();
   private addressValidator: MatValidateAddressDirective = new MatValidateAddressDirective();
 
@@ -55,6 +64,9 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit {
     this.addressValidator.validate()])
   );
 
+  propagateChange = (_: any) => {
+  };
+
   constructor(@Inject(PLATFORM_ID) public platformId: string,
               public elemRef: ElementRef,
               public mapsAPILoader: MapsAPILoader,
@@ -151,6 +163,8 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit {
             } else {
               // show dialog to select a address from the input
               // emit failed event
+              this.value = place;
+              this.propagateChange(this.value)
             }
             this.address = place.formatted_address;
             this.onAutocompleteSelected.emit(place);
@@ -165,4 +179,20 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit {
       .catch((err) => console.log(err));
   }
 
+  registerOnChange(fn: any): void {
+    this.propagateChange = fn;
+  }
+
+  registerOnTouched(fn: any): void {
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+  }
+
+  writeValue(obj: any): void {
+    if (obj) {
+      this.value = obj;
+    }
+  }
+
 }