Merge pull request #138 from netgrif/NAE-1745

[NAE-1745] Enumeration autocomplete constantly sending value

Author: machacjozef

projects/netgrif-components-core/src/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/abstract-enumeration-autocomplete-select-field.component.ts

@@ -1,10 +1,11 @@
-import {Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {FormControl} from '@angular/forms';
+import {Component, Input, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {FormControl, NgModel} from '@angular/forms';
 import {Observable, of} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
 import {EnumerationField, EnumerationFieldValidation, EnumerationFieldValue} from '../models/enumeration-field';
 import {WrappedBoolean} from '../../data-field-template/models/wrapped-boolean';
 import {TranslateService} from '@ngx-translate/core';
+import {MatAutocompleteSelectedEvent} from '@angular/material/autocomplete';
 
 @Component({
     selector: 'ncc-abstract-enumeration-autocomplete-field',
@@ -15,18 +16,28 @@ export abstract class AbstractEnumerationAutocompleteSelectFieldComponent implem
     @Input() enumerationField: EnumerationField;
     @Input() formControlRef: FormControl;
     @Input() showLargeLayout: WrappedBoolean;
-    @ViewChild('input') text: ElementRef;
+    @ViewChild('input') text: NgModel;
+    public tmpValue: string;
 
     filteredOptions: Observable<Array<EnumerationFieldValue>>;
 
     constructor(protected _translate: TranslateService) {
     }
 
     ngOnInit() {
+        this.tmpValue = this.formControlRef.value ?? '';
         this.filteredOptions = this.formControlRef.valueChanges.pipe(
             startWith(''),
             map(value => this._filter(value))
         );
+        this.enumerationField.touch$.subscribe(touch => {
+            if (touch) {
+                this.text.control.markAsTouched();
+            }
+        });
+        this.formControlRef.valueChanges.subscribe(it => {
+            this.tmpValue = it ?? '';
+        });
     }
 
     ngOnDestroy(): void {
@@ -46,11 +57,20 @@ export abstract class AbstractEnumerationAutocompleteSelectFieldComponent implem
     }
 
     change() {
-        if (this.text.nativeElement.value !== undefined) {
-            this.filteredOptions = of(this._filter(this.text.nativeElement.value));
+        if (this.text.value !== undefined) {
+            this.filteredOptions = of(this._filter(this.text.value));
         }
     }
 
+    select(event: MatAutocompleteSelectedEvent) {
+        this.formControlRef.setValue(event.option.value);
+    }
+
+
+    isInvalid(): boolean {
+        return !this.formControlRef.disabled && !this.formControlRef.valid && this.text.control.touched;
+    }
+
     public renderSelection = (key) => {
         if (key !== undefined && key !== '' && key !== null) {
             if (this.enumerationField.choices.find(choice => choice.key === key)) {

projects/netgrif-components-core/src/lib/data-fields/models/abstract-data-field.ts

@@ -273,6 +273,10 @@ export abstract class DataField<T> {
         this._touch.next(set);
     }
 
+    get touch$(): Observable<boolean> {
+        return this._touch.asObservable();
+    }
+
     get component(): Component {
         return this._component;
     }

projects/netgrif-components/src/lib/data-fields/enumeration-field/enumeration-autocomplete-select-field/enumeration-autocomplete-select-field.component.html

@@ -3,19 +3,20 @@
     <input type="text"
            aria-label="Autocomplete"
            matInput
-           #input
+           #input="ngModel"
            [placeholder]="enumerationField.placeholder"
-           [formControl]="formControlRef"
            [matAutocomplete]="auto"
+           [(ngModel)]="tmpValue"
            [required]="enumerationField.behavior.required"
+           [disabled]="formControlRef.disabled"
            (focus)="change()"
            (keyup)="change()">
-    <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete">
+    <mat-autocomplete [displayWith]="renderSelection" autoActiveFirstOption #auto="matAutocomplete" (optionSelected)="select($event)">
         <mat-option [value]="null">---</mat-option>
         <mat-option *ngFor="let option of filteredOptions | async" [value]="option.key" (click)="change()">
             {{option.value}}
         </mat-option>
     </mat-autocomplete>
     <mat-hint>{{enumerationField.description}}</mat-hint>
-    <mat-error *ngIf="enumerationField.isInvalid(formControlRef)">{{buildErrorMessage()}}</mat-error>
+    <mat-error *ngIf="isInvalid() !== undefined">{{buildErrorMessage()}}</mat-error>
 </mat-form-field>