Autocomplete Material Angular 2 implementation Error - node.js

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!

Answer 1

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 { }