Finalized autocomplete fields component

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

@@ -63,15 +63,10 @@
         
         <!--this should be invisible -->
         <app-main-sign-in [ngClass]="'invisible'"></app-main-sign-in>
-          <!--
-        -->
-<!--
-        <autocomplete-remote [formControlName]="a1" [label]="'Please select a datarepo'" [url]="'https://eestore.paas2.uninett.no/api/datarepo/'" ></autocomplete-remote>
-        <autocomplete-remote [formControlName]="a2" [label]="'Please select a projectrepo'" [url]="'https://eestore.paas2.uninett.no/api/projectrepo/'" ></autocomplete-remote>
-        <autocomplete-remote [formControlName]="a3" [label]="'Please select an organizationrepo'" [url]="'https://eestore.paas2.uninett.no/api/organizationrepo/'" ></autocomplete-remote>
-        <autocomplete-remote [formControlName]="a4" [label]="'Please select a personrepo'" [url]="'https://eestore.paas2.uninett.no/api/personrepo/'" ></autocomplete-remote>
--->
         
+<!--    
+        <sample-form></sample-form>
+-->
 
   </div>
 

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

@@ -9,6 +9,9 @@ import { MainSignInComponent } from './login/main-sign-in/main-sign-in.component
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
 
+import { SampleFormComponent } from './sample-form/sample-form.component';
+
+
 declare var $ :any;
 @Component({
   selector: 'app-root',

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

@@ -70,6 +70,7 @@ import { UserWorkspaceComponent } from './user-workspace/user-workspace.componen
 import { AutocompleteRemoteComponent } from './form/fields/autocomplete-remote/autocomplete-remote.component';
 
 import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
+import { SampleFormComponent } from './sample-form/sample-form.component';
 
 
 
@@ -100,7 +101,7 @@ import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
     DmpTableFilterPipe,
     DatasetTableFilterPipe, 
     DatasetStatusFilterPipe, 
-    StatusToString
+    StatusToString, SampleFormComponent
   ],
   imports: [
     BrowserModule,

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

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

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

@@ -1,4 +1,6 @@
 import { Component, OnInit,Input, Output, EventEmitter} from '@angular/core';
+import { FormGroup, Validators } from '@angular/forms';
+
 import { ServerService } from '../../../services/server.service';
 import { UUID } from 'angular2-uuid';
 import { NguiAutoCompleteModule } from '@ngui/auto-complete';
@@ -18,10 +20,14 @@ export class AutocompleteRemoteComponent implements OnInit {
 
   }
 
-  @Input() id : string;
+
+
+  @Input() id : string = UUID.UUID();
   @Input() label : string;
   @Input() url : string;
-  @Input() formControlName : string;
+  @Input() formCtrlName : string;
+  @Input() form: FormGroup;
+
 
   selectedValue : string;
   //@Output() selectedValueEmitter: EventEmitter<string> = new EventEmitter<string>();
@@ -31,8 +37,6 @@ export class AutocompleteRemoteComponent implements OnInit {
   query : string = "";
 
   ngOnInit() {
-    if(this.id == null)
-      this.id = UUID.UUID();
     this.updateByQuery(this.query); //just to trigger the first call
   }
 

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

@@ -0,0 +1,10 @@
+
+<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>

dmp-frontend/src/app/sample-form/sample-form.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SampleFormComponent } from './sample-form.component';
+
+describe('SampleFormComponent', () => {
+  let component: SampleFormComponent;
+  let fixture: ComponentFixture<SampleFormComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SampleFormComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SampleFormComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,30 @@
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup } from '@angular/forms';
+
+import { AutocompleteRemoteComponent } from '../form/fields/autocomplete-remote/autocomplete-remote.component';
+
+@Component({
+  selector: 'sample-form',
+  templateUrl: './sample-form.component.html',
+  styleUrls: ['./sample-form.component.css']
+})
+export class SampleFormComponent implements OnInit {
+
+
+  sampleForm : any;
+
+
+  constructor() { }
+
+  ngOnInit() {
+
+    this.sampleForm = new FormGroup ({
+      a1: new FormControl(),
+      a2: new FormControl(),
+      a3: new FormControl(),
+      a4: new FormControl()
+    });
+
+  }
+
+}