fix(lib): solved default country bug #11 #35

angular-material-extensions · Oct 4, 2020 · af00b88 · af00b88
1 parent 7ade997
commit af00b88
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 18 deletions.
diff --git a/...ects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html b/...ects/angular-material-extensions/select-country/src/lib/mat-select-country.component.html
@@ -3,10 +3,14 @@
         <mat-label *ngIf="label">{{label}}</mat-label>
         <mat-icon *ngIf="this.value" [svgIcon]="this.value?.alpha2Code?.toLowerCase()" class="mr-12 s-20 secondary-text"
                   matSuffix></mat-icon>
-        <input (blur)="onBlur()" (input)="inputChanged($event?.target?.value)" [class]="class"
-               [formControl]="countryFormControl" [matAutocomplete]="countryAutocomplete"
+        <input (blur)="onBlur()" (input)="inputChanged($event?.target?.value)"
+               [class]="class"
+               [matAutocomplete]="countryAutocomplete"
                [placeholder]="placeHolder"
-               [readonly]="readonly" [value]="this.value?.name" aria-label="country"
+               [readonly]="this.readonly"
+               [value]="this.value?.name"
+               [disabled]="this.disabled || this.loadingDB"
+               aria-label="country"
                matInput type="text">
         <mat-progress-bar *ngIf="this.loadingDB || this.loading" mode="buffer"></mat-progress-bar>
         <mat-autocomplete #countryAutocomplete="matAutocomplete" (opened)="autocompleteScroll()"

diff --git a/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts b/projects/angular-material-extensions/select-country/src/lib/mat-select-country.component.ts
@@ -11,7 +11,7 @@ import {
   SimpleChanges,
   ViewChild
 } from '@angular/core';
-import { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { MatAutocomplete, MatAutocompleteSelectedEvent, MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { MatFormFieldAppearance } from '@angular/material/form-field';
 import { fromEvent, Subject, Subscription } from 'rxjs';
@@ -64,7 +64,7 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
 
   @Output() onCountrySelected: EventEmitter<Country> = new EventEmitter<Country>();
 
-  countryFormControl = new FormControl();
+  // countryFormControl = new FormControl();
   filteredOptions: Country[];
   db: Country[];
   loadingDB: boolean;
@@ -95,14 +95,10 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
   ngOnInit() {
     if (!this.countries) {
       console.log('lang', this.i18n);
-      this.countryFormControl.disable();
       this.loadingDB = true;
       this._importLang(this.i18n)
         .then((res) => {
           // console.log('countries', this.countries);
-          if (!this.disabled) {
-            this.countryFormControl.enable();
-          }
         }).catch((err) => console.error('Error: ' + err))
         .finally(() => this.loadingDB = false);
     }
@@ -133,17 +129,10 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
         this.value = undefined;
       }
     }
-    if (changes.disabled) {
-      changes.disabled.currentValue ? this.countryFormControl.disable() : this.countryFormControl.enable();
-    }
   }
 
   onBlur() {
-    if (this.countryFormControl.value || !this.nullable) {
-      this.countryFormControl.setValue(
-        this.value ? this.value.name : ''
-      );
-    } else if (this.value) {
+    if (this.value && this.nullable) {
       this.value = null;
       this.onCountrySelected.emit(null);
     }
@@ -158,7 +147,6 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
     console.log('writeValue');
     if (obj) {
       this.value = obj;
-      console.log('writeValue done', this.value);
     }
   }