Autocomplete filter on FormArray - Angular4 Materials -
i'm little new angular 4 , super new materials library (literally installed yesterday).
i trying create list of dynamically added / removed input fields. idea have admin create list of users delete database , hit service once array of users remove.
i have array of users gets populated service. have formgroup created. in formgroup have formarray contains possible new formcontrol elements. users can add , remove items in array clicking button. creates input fields on screen. want autocomplete box show pick user list, , want start filtering list admin begins typing input field. filter needs applied against string created lastname , firstname fields of user object. i'm getting following error implementation.
removeusercomponent.html:11 error error: invalidpipeargument: '[object object],[object object],[object object],[object object],[object object],[object object]' pipe 'asyncpipe'
here removeuser.component.ts file:
export class removeusercomponent implements oninit{ users:user[]; filteredoptions: observable<user>; userform = new formgroup({ userstodelete : new formarray([new formcontrol()]), }); userstodelete() : formarray{return this.userform.get('userstodelete') formarray} constructor(private adminservice:adminservice){} ngoninit(){ this.filteredoptions = this.userstodelete.valuechanges .startwith(null) .map(user => user && typeof user === 'object' ? user.lastname : user) .map(name => name ? this.filter(name) : this.users.slice()); this.adminservice.getusersbytype() .subscribe((data:user[])=>{ this.users = data; console.log("your user array"); console.log(this.users); }); } adduser(){ this.userstodelete.push(new formcontrol()); } ondelete(i:number){ this.userstodelete.removeat(i); } displayfn(user:user){ return user ? user.lastname + ", " + user.firstname: user; } filter(name: string): user[] { return this.users.filter(option => new regexp(`^${name}`, 'gi').test(user)); } } here html template using:
<form [formgroup]="userform" (ngsubmit)="deleteusers()" *ngif="users"> <div formarrayname="userstodelete"> <div *ngfor="let user of userstodelete.controls;let = index"> <span class="inputdeleteuserrow"> <md-input-container> <input type="text" [mdautocomplete]="auto" mdinput [formcontrolname]="i"> </md-input-container> <button class="btn btn-danger" type="button" (click)="ondelete(i)">-</button> <md-autocomplete #auto="mdautocomplete" [displaywith]="displayfn"> <md-option *ngfor="let user of users | async" [value]="user"> {{ user.lastname }} , {{user.firstname}} </md-option> </md-autocomplete> </span> </div> </div> <button class="btn btn-success" (click)="adduser()">+</button> </form> i think has items being array of users , need observable, i'm not positive exactly. i'm positive filter hosed going deal adjustments on once got code working.
i'm little new angular, if wouldn't mind being thorough in explanation appreciate it. want grasp happening, why it's happening, , took left turn in code can better developer. folks!
found problem code. it's in under tag.
original was
<md-option *ngfor="let user of users| async" [value]="user"> should have been
<md-option *ngfor="let user of filteredoptions | async" [value]="user"> code still broke, it's how filters working -- suspected previously. if stopped in take look.
Comments
Post a Comment