fixed autocomplete field rendering

This commit is contained in:
satyr 2017-11-10 11:53:01 +02:00
parent ff45be8005
commit 7623ec88ed
6 changed files with 79 additions and 39 deletions

View File

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

View File

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

View File

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

View File

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

View File

@ -37,7 +37,7 @@
on change event the listener is triggered on blur --> on change event the listener is triggered on blur -->
<div *ngSwitchCase="'dropdown'"> <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)"> <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> <option *ngFor="let opt of field.options" [value]="opt._value" >{{opt._label}}</option>
</select> </select>

View File

@ -1,10 +1,11 @@
<form [formGroup]="sampleForm" novalidate> <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]="'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]="'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]="'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> <autocomplete-remote [form]="sampleForm" [formCtrlName]="'a4'" [label]="'Please select a personrepo'" [url]="'https://eestore.paas2.uninett.no/api/personrepo/'" ></autocomplete-remote>
-->
{{sampleForm.value | json }} {{sampleForm.value | json }}
</form> </form>