diff --git a/dmp-frontend/src/app/app.module.ts b/dmp-frontend/src/app/app.module.ts
index 6e05b28fc..8f51a52d5 100644
--- a/dmp-frontend/src/app/app.module.ts
+++ b/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';
diff --git a/dmp-frontend/src/app/form/dynamic-form.component.ts b/dmp-frontend/src/app/form/dynamic-form.component.ts
index 1a4e3ea29..09dfad201 100644
--- a/dmp-frontend/src/app/form/dynamic-form.component.ts
+++ b/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';
diff --git a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html
index febe4d700..898c068e6 100644
--- a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html
+++ b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.html
@@ -1,4 +1,4 @@
-
- {{label}}
-
-
+
+{{label}}
+
+
diff --git a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts b/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts
index 872a32b13..b994cbb72 100644
--- a/dmp-frontend/src/app/form/fields/autocomplete-remote/autocomplete-remote.component.ts
+++ b/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 = new EventEmitter();
-
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;
+ }
+ }
+
}
+
diff --git a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
index 5201d4cf8..270116abf 100644
--- a/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
+++ b/dmp-frontend/src/app/form/fields/dynamic-form-field.component.html
@@ -37,7 +37,7 @@
on change event the listener is triggered on blur -->
-
+
{{opt._label}}
diff --git a/dmp-frontend/src/app/sample-form/sample-form.component.html b/dmp-frontend/src/app/sample-form/sample-form.component.html
index 4bd3e8dcb..b7e67f845 100644
--- a/dmp-frontend/src/app/sample-form/sample-form.component.html
+++ b/dmp-frontend/src/app/sample-form/sample-form.component.html
@@ -1,10 +1,11 @@
\ No newline at end of file