fixed autocomplete field rendering

dmp-frontend/src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NgModule, forwardRef } from '@angular/core';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { HttpClientModule } from '@angular/common/http';
 import { HttpModule } from '@angular/http';
 import { RouterModule, Routes, Router } from '@angular/router';

dmp-frontend/src/app/form/dynamic-form.component.ts

@@ -1,5 +1,5 @@
-import { Component, Input, OnInit, AfterViewChecked, ViewChild } from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+import { Component, Input, OnInit, AfterViewChecked, ViewChild, forwardRef } from '@angular/core';
+import { FormGroup, Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { NgForm } from '@angular/forms';
 import { Router, ActivatedRoute, ParamMap, Params } from '@angular/router';
 import 'rxjs/add/operator/switchMap';
@@ -13,6 +13,7 @@ import { GroupBase } from './dynamic-form-group/group-base';
 import { PaginationService } from '../../app/services/pagination.service';
 import { TokenService, TokenProvider } from '../services/login/token.service';
 import { ModalComponent } from '../modal/modal.component';
+import { AutocompleteRemoteComponent } from './fields/autocomplete-remote/autocomplete-remote.component';
 
 import { AngularDraggableModule } from 'angular2-draggable';
 

dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html

@@ -1,4 +1,4 @@
-<div [formGroup]="form">
-  <label *ngIf="label" for="{{id}}">{{label}}</label>
-  <input auto-complete class="form-control" formControlName="{{formCtrlName}}" id="{{id}}" [ngModel]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" />
-</div>
+
+<label *ngIf="label" for="{{id}}">{{label}}</label>
+<input auto-complete class="form-control" [value]="selectedValue" id="{{id}}" [(ngModel)]="selectedValue" (ngModelChange)="updateByQuery($event)" [source]="values" >
+

dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts

@@ -1,5 +1,5 @@
-import { Component, OnInit,Input, Output, EventEmitter} from '@angular/core';
-import { FormGroup, Validators } from '@angular/forms';
+import { Component, OnInit,Input, Output, EventEmitter, forwardRef} from '@angular/core';
+import { Validators, ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 
 import { ServerService } from '../../../services/server.service';
 import { UUID } from 'angular2-uuid';
@@ -11,51 +11,89 @@ declare var $: any;
 @Component({
   selector: 'autocomplete-remote',
   templateUrl: './autocomplete-remote.component.html',
-  styleUrls: ['./autocomplete-remote.component.css']
-})
-
-export class AutocompleteRemoteComponent implements OnInit {
-
-  constructor(private serverService :ServerService) {
-
-  }
+  styleUrls: ['./autocomplete-remote.component.css'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => AutocompleteRemoteComponent),
+      multi: true
+    }
+  ]
+  })
 
 
 
-  @Input() id : string = UUID.UUID();
+export class AutocompleteRemoteComponent implements OnInit, ControlValueAccessor {
+
+
+  id : string = UUID.UUID();
   @Input() label : string;
   @Input() url : string;
-  @Input() formCtrlName : string;
-  @Input() form: FormGroup;
+  @Input() selectedValue : string;
 
 
-  selectedValue : string;
-  //@Output() selectedValueEmitter: EventEmitter<string> = new EventEmitter<string>();
-
   values : any[] = new Array();
 
   query : string = "";
 
+
+  constructor(private serverService :ServerService) {
+    
+  }
+
+
   ngOnInit() {
-    this.updateByQuery(this.query); //just to trigger the first call
+    //this.updateByQuery(this.query); //just to trigger the first call
   }
 
 
 
   updateByQuery(query : string){
-    //this.selectedValueEmitter.next(this.selectedValue);
-    this.serverService.getThroughProxy(this.url, query).subscribe(
-      response => {
-        this.values.length = 0; //clear array; -- this is quite a fast and memory efficient way
-        response.data.forEach(element => {
-          this.values.push(element.attributes.name);
-        });
-      },
-      error => {
-        console.log(error);
-      }
-    );
+    if(query){
+      this.serverService.getThroughProxy(this.url, query).subscribe(
+        response => {
+          this.values.length = 0; //clear array; -- this is quite a fast and memory efficient way
+          response.data.forEach(element => {
+            this.values.push(element.attributes.name);
+          });
+        },
+        error => {
+          console.log(error);
+        }
+      );
+    }
   }
 
 
+  onChange: any = () => { };
+  onTouched: any = () => { };
+
+  get value() {
+    this.value = this.selectedValue;
+    return this.selectedValue;
+  }
+
+  set value(val) {
+    this.selectedValue = val;
+    this.onChange(val);
+    this.onTouched();
+  }
+
+  
+
+  registerOnChange(fn) {
+    this.onChange = fn;
+  }
+
+  registerOnTouched(fn) { 
+    this.onTouched = fn;
+  }
+
+  writeValue(value) {
+    if (value) {
+      this.value = value;
+    }
+  }
+
 }
+

dmp-frontend/src/app/form/fields/dynamic-form-field.component.html

@@ -37,7 +37,7 @@
       on change event the listener is triggered on blur -->
 
       <div *ngSwitchCase="'dropdown'">     
-        <autocomplete-remote *ngIf="field.url" [form]="form" [formCtrlName]="field.key" [url]="field.url" ></autocomplete-remote>
+        <autocomplete-remote *ngIf="field.url" [formControlName]="field.key" [label]="field.label" [url]="field.url" ></autocomplete-remote>
         <select *ngIf="!field.url"  class="form-control" [id]="field.key" [formControlName]="field.key"  [required]="field.required" (change)="toggleVisibility($event, field, false)">
           <option *ngFor="let opt of field.options" [value]="opt._value"  >{{opt._label}}</option>
         </select>

dmp-frontend/src/app/sample-form/sample-form.component.html

@@ -1,10 +1,11 @@
 
 <form [formGroup]="sampleForm" novalidate>
   
+  <!--
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a1'" [label]="'Please select a datarepo'" [url]="'https://eestore.paas2.uninett.no/api/datarepo/'" ></autocomplete-remote>
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a2'" [label]="'Please select a projectrepo'" [url]="'https://eestore.paas2.uninett.no/api/projectrepo/'" ></autocomplete-remote>
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a3'" [label]="'Please select an organizationrepo'" [url]="'https://eestore.paas2.uninett.no/api/organizationrepo/'" ></autocomplete-remote>
   <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a4'" [label]="'Please select a personrepo'" [url]="'https://eestore.paas2.uninett.no/api/personrepo/'" ></autocomplete-remote>
-  
+  -->
 {{sampleForm.value | json }}
 </form>