Autocomplete Material Angular 2 implementation Error

Question

I have an error in regards with the angular 2 when I implement with autocomplete on material design and I have no idea why because it is my first time implementing it practicing with backend asp.net core. I tried installing some of the ng2 libraries but does not work at all. Here is my code below:

import { Component } from '@angular/core';
import { WebServiceComponents } from '../WebService/web.service';
import { FormControl } from '@angular/forms';

import 'rxjs/add/operator/startWith';
import 'rxjs/add/operator/map';

@Component({
    selector: 'new-user-account',
    template: `
              <md-card class="card-margin">
                <md-card-content>
                    <md-input-container>
                        <input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [formControl]="UserAccountCtrl" /><br />
                    </md-input-container>
                    <md-autocomplete #auto="mdAutocomplete">
                        <md-option *ngFor="let userAccount of filterUserAccount | async" [value]="userAccount">
                            {{userAccount.username}}
                        </md-option>
                    </md-autocomplete>
                    <md-input-container>
                        <input mdInput placeholder="Username" /><br />
                    </md-input-container>
                </md-card-content>
              </md-card>
              `
})

export class NewUserAccountComponent{
    UserAccountCtrl: FormControl;
    filterUserAccount: any;

     async ngOnInit(){
        var response = await this.webService.getUserAccounts();
        this.userAccounts = response.json();
    }

    userAccounts = [];

    constructor(private webService : WebServiceComponents){
    this.UserAccountCtrl = new FormControl();
    this.filterUserAccount = this.UserAccountCtrl.valueChanges
        .startWith(null)
        .map(name => this.filterUserAccount(name));
    }




   

    filteredUserAccount(val: string) {
    return val ? this.userAccounts.filter(s => new RegExp(`^${val}`, 'gi').test(s))
               : this.userAccounts;
  }
}

And the error as follows below:

zone.js:645 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("ainer>
                        <input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [ERROR ->][formControl]="UserAccountCtrl" /><br />
                    </md-input-container>
                  "): ng:///AppModule/NewUserAccountComponent.html@4:93
Error: Template parse errors:
Can't bind to 'formControl' since it isn't a known property of 'input'. ("ainer>
                        <input mdInput placeholder="Select Employee" [mdAutocomplete]="auto" [ERROR ->][formControl]="UserAccountCtrl" /><br />
                    </md-input-container>
                  "): ng:///AppModule/NewUserAccountComponent.html@4:93
    at syntaxError (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19)
    at JitCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39)
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62)
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19)
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19)
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:391:26)
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:141:43)
    at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:57
    at syntaxError (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:1513:34)
    at TemplateParser.parse (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:11951:19)
    at JitCompiler._compileTemplate (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25723:39)
    at eval (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:62)
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25647:19)
    at createResult (http://localhost:3002/node_modules/@angular/compiler/bundles/compiler.umd.js:25532:19)
    at ZoneDelegate.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:391:26)
    at Zone.run (http://localhost:3002/node_modules/zone.js/dist/zone.js:141:43)
    at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:57
    at resolvePromise (http://localhost:3002/node_modules/zone.js/dist/zone.js:770:31)
    at resolvePromise (http://localhost:3002/node_modules/zone.js/dist/zone.js:741:17)
    at http://localhost:3002/node_modules/zone.js/dist/zone.js:818:17
    at ZoneDelegate.invokeTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:424:31)
    at Zone.runTask (http://localhost:3002/node_modules/zone.js/dist/zone.js:191:47)
    at drainMicroTaskQueue (http://localhost:3002/node_modules/zone.js/dist/zone.js:584:35)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3002/node_modules/zone.js/dist/zone.js:490:25)

I don't know whats going on but I followed the steps in angular material design autocomplete component but it seems not working to me.

Does anyone knows how to fix this issue? And can someone help me with my code? I'm newbie working for fixing this issue for almost 3 hours right now.

Thanks and have a great day!

Possible duplicate of [Can't bind to 'formControl' since it isn't a known property of 'input' - angular2 material Autocomplete issue](https://stackoverflow.com/questions/43220348/cant-bind-to-formcontrol-since-it-isnt-a-known-property-of-input-angular) — anoop, Jun 08 '17 at 12:17
Not yet...hmp... can you tell me how to import reactive module? — Alvin Quezon, Jun 08 '17 at 12:17
https://angular.io/docs/ts/latest/cookbook/dynamic-form.html#!#bootstrap — yurzui, Jun 08 '17 at 12:18
Do you have any idea why there's an error `TypeError: this.filterUserAccount is not a function` do you have any idea why is this happen? — Alvin Quezon, Jun 08 '17 at 12:37
I think it should work after importing ReactiveFormsModule. I have follow the Angular Material Autocomplete [Documentation](https://material.angular.io/components/component/autocomplete) with importing ReactiveFormsModule. Its works fine for me. — dharmesh kaklotar, Jun 08 '17 at 12:55

score 0 · Answer 1 · answered Dec 07 '17 at 12:20

import FormsModule, ReactiveFormsModule from @angular/forms like below

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Autocomplete Material Angular 2 implementation Error

1 Answers1