fix(lib): solved minor bug #35

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

Hide file tree

Showing 4 changed files with 19 additions and 10 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
@@ -6,7 +6,7 @@
         <input (blur)="onBlur()" (input)="inputChanged($event?.target?.value)" [class]="class"
                [formControl]="countryFormControl" [matAutocomplete]="countryAutocomplete"
                [placeholder]="placeHolder"
-               [readonly]="readonly" [value]="value?.name" aria-label="country"
+               [readonly]="readonly" [value]="this.value?.name" 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
@@ -83,6 +83,7 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
     return this._value;
   }
 
+  @Input()
   set value(value: Country) {
     this._value = value;
     this.propagateChange(this._value);
@@ -98,8 +99,7 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
       this.loadingDB = true;
       this._importLang(this.i18n)
         .then((res) => {
-          console.log('result', res);
-          console.log('countries', this.countries);
+          // console.log('countries', this.countries);
           if (!this.disabled) {
             this.countryFormControl.enable();
           }
@@ -119,7 +119,7 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    console.log('changes', changes);
+    // console.log('changes', changes);
     if (changes.country) {
       if (changes.country.currentValue) {
         const newValue = changes.country.currentValue.toUpperCase();
@@ -155,8 +155,10 @@ export class MatSelectCountryComponent implements OnInit, OnChanges, OnDestroy,
   }
 
   writeValue(obj: any): void {
+    console.log('writeValue');
     if (obj) {
       this.value = obj;
+      console.log('writeValue done', this.value);
     }
   }
 

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -471,11 +471,13 @@ <h2 class="div-ex2">Loading countries (e.g: Http...)</h2>
     <h2 class="div-ex2">Usage with Reactive Forms</h2>
 
     <div fxLayoutAlign="center">
-        <mat-select-country appearance="outline"
-                            label="Country"
-                            [formControl]="countryFormControl"
-                            (onCountrySelected)="onCountrySelected($event)">
-        </mat-select-country>
+        <form [formGroup]="countryFormGroup">
+            <mat-select-country appearance="outline"
+                                label="Country"
+                                formControlName="country"
+                                (onCountrySelected)="onCountrySelected($event)">
+            </mat-select-country>
+        </form>
     </div>
 
     <markdown src="assets/md/e2.md"></markdown>

diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -54,7 +54,12 @@ export class AppComponent implements OnInit {
   ngOnInit(): void {
 
     this.countryFormGroup = this.formBuilder.group({
-      country: []
+      country: [{
+        name: 'Deutschland',
+        alpha2Code: 'DE',
+        alpha3Code: 'DEU',
+        numericCode: '276'
+      }]
     });
 
     this.countryFormGroup.get('country').valueChanges.subscribe(country => console.log('this.countryFormGroup.get(\'country\').valueChanges', country));