13

Error

There is no directive with "exportAs" set to "matAutocomplete" ("-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">

I have used code from https://material.angular.io/components/autocomplete/overview

I have also include in import in angular app.module.ts:

import { 
         MdAutocompleteModule,

  } from '@angular/material';

Html component

<form class="example-form">
    <mat-form-field class="example-full-width">
        <input type="text" placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
        <mat-autocomplete #auto="matAutocomplete">
            <mat-option *ngFor="let option of options" [value]="option">
                {{ option }}
            </mat-option>
        </mat-autocomplete>
     </mat-form-field>
</form>

ng--version

@angular/cli: 1.2.1
node: 8.3.0
os: win32 x64
@angular/animation: 4.0.0-beta.8
@angular/animations: 4.3.3
@angular/cdk: 2.0.0-beta.8
@angular/common: 4.3.2
@angular/compiler: 4.3.2
@angular/core: 4.3.6
@angular/forms: 4.3.2
@angular/http: 4.3.2
@angular/material: 2.0.0-beta.8
@angular/platform-browser: 4.3.2
@angular/platform-browser-dynamic: 4.3.2
@angular/router: 4.3.2
@angular/cli: 1.2.1
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.3.2

can anyone suggest why angular is complaining about.

FAISAL
  • 33,618
  • 10
  • 97
  • 105
afeef
  • 4,396
  • 11
  • 35
  • 65
  • update your angular and material versions to 5+ ... you are using `@angular/material: 2.0.0-beta.8` which does not support `mat` prefix. The documents site from angular material uses the latest versions. If you want to keep using the same version, let me know, I'll post a version specific answer. – FAISAL Feb 02 '18 at 10:15
  • I have the exact some problem. I've got autocompletes up and running in one component, I want to use them in another component and I get this stuff thrown at me. Did you ever find out what was causing it? – Sven Cazier Sep 18 '20 at 13:52

1 Answers1

4

To use mat-form-field, you have to update your @angular/material and @angular/cdk versions to atleast 2.0.0-beta.12. Use the following commands to update: 

npm install @angular/cdk@2.0.0-beta.12
npm install @angular/material@2.0.0-beta.12

Then, you have import the following in your AppModule:

import { MatAutocompleteModule, MatFormFieldModule } from '@angular/material';

@NgModule({
    imports: [
        ....
        MatAutocompleteModule, 
        MatFormFieldModule,
        ....
    ],
    ....
})
export class AppModule { }

Here is a working StackBlitz demo using version 2.0.0-beta.12

FAISAL
  • 33,618
  • 10
  • 97
  • 105