Autocomplete filter on FormArray - Angular4 Materials

Question

I'm a little new to angular 4 and super new to the materials library (literally installed this yesterday).

I am trying to create a list of dynamically added / removed input fields. The idea is to have my admin create a list of users to delete from the database and hit the service once with an array of users to remove.

I have an array of users that gets populated from a service. I have a formgroup created. In that formGroup I have a FormArray that contains possible new FormControl elements. Users can add and remove items in this array by clicking a button. This creates input fields on the screen. I want an autocomplete box to show up to pick a user from the list, and I want to start filtering the list as the admin begins typing into the input field. The filter needs to be applied against a string created from the lastName and the firstName fields of my user object. I'm getting the following error with my implementation.

RemoveUserComponent.html:11 ERROR Error: InvalidPipeArgument: '[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]' for pipe 'AsyncPipe'

Here is my RemoveUser.component.ts file:

export class RemoveUserComponent implements OnInit{

        users:User[];
        filteredOptions: Observable<User>;

        userForm = new FormGroup({
            usersToDelete : new FormArray([new FormControl()]),
        });

        get usersToDelete() : FormArray{return this.userForm.get('usersToDelete') as 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 is the HTML template I am using:

<form [formGroup]="userForm" (ngSubmit)="deleteUsers()" *ngIf="users">
                    <div formArrayName="usersToDelete">
                        <div *ngFor="let user of usersToDelete.controls;let i = 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 this has to do with the items being an array of users and they need to be an observable, but I'm not positive what to do about it exactly. I'm also positive my filter is hosed but I was going to deal with the adjustments on that once I got the code working.

I'm a little new to angular, so if you wouldn't mind being thorough in the explanation I would greatly appreciate it. I really want to grasp what is happening, why it's happening, and where I took the left turn in my code so I can be a better developer. Thanks folks!

Tom L'esperance Tom L'esperance · Accepted Answer · 2017-04-16T03:25:13

Found the problem with the code. It's actually in the under the 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 is still broke, but it's how the filters are working now -- as I suspected previously. Thanks if you stopped in to take a look.

Autocomplete filter on FormArray - Angular4 Materials

1 Answers