The exportAs property for matAutocomplete has not been specified

Issue Detected

An error occurred with the directive "exportAs" set to "matAutocomplete" ("-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">

I implemented code referenced from https://material.angular.io/components/autocomplete/overview

I have also imported in angular app.module.ts:

import { 
         MdAutocompleteModule,

  } from '@angular/material';

HTML Component Structure

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

Angular Version Details

@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

Seeking assistance in resolving the issue raised by Angular.

Answer №1

In order to utilize the mat-form-field component, it is essential to ensure that your versions of @angular/material and @angular/cdk are updated to a minimum of 2.0.0-beta.12. Follow the commands below for updating:

npm install @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b585f507b09150b150b16595e4f5a150a09">[email protected]</a>
npm install @angular/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="563b372233243f373a1664786678667b34332237786764">[email protected]</a>

Afterwards, make sure to include the following in your AppModule:

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

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

For a functional demonstration with version 2.0.0-beta.12, you can view this working StackBlitz demo

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to include a badge within the nebular menu

Can someone assist me with adding a badge to the Nebular menu to display the inbox count dynamically? Any help would be greatly appreciated. Thanks! import { NbMenuItem } from '@nebular/theme'; export const MENU_ITEMS: NbMenuItem[] = [ { ti ...

The combination of Object.keys() and the find function

Having trouble figuring out why I'm getting an error when attempting to use ES6 .find on the following data in order to retrieve the record with id number 3. { {id:10,title:'Dairy & Eggs'} {id:7,title:'Laundry & Household'} {id ...

What could be causing the issue with the conditional validation in my zod and react-hook-form integration?

Hello there! I recently refactored my code and encountered a problem with a conditional field. When the user selects "Yes," an additional field should appear below for them to fill out. However, the issue I'm facing is that when "Yes" is selected, the ...

How do I determine in Angular (2+) when all child components have been initialized from the parent component?

Is there a lifecycle hook named "ngAfterAllChildrenInit" that can be used because ngAfterViewInit is called before the ngOninit of the children? I am currently trying to find a solution that avoids using setTimeOut or emitting events from all of the child ...

Trouble viewing information on initial try

I am currently facing an issue with retrieving data from firestore. Initially, everything was working perfectly fine. However, I now need to incorporate a check to verify if the user is logged in. If the user is not logged in, they should be redirected to ...

Error encountered while reading JSON data using Angular4 and TypeScript: Json

When a user selects one or more checkboxes and submits a form, data in the database is updated. At that moment, I call location.reload() from the code to reload the page and display the correct data. Below is the backend web API code: [HttpGet] public as ...

Encountering an error on Ionic 4, Angular 8: Unable to access property 'subscribe' of undefined

I have a project that utilizes Ionic 4 and Angular 8. The project requires integration with a payment gateway service, which I am accomplishing using the Ionic 4 InAppBrowser plugin to open the payment gateway site. This is how I've implemented it: ...

How can you inform TypeScript about a file that will be included using a script tag?

I am currently utilizing TypeScript for my front-end JavaScript development, and I have a situation where I am loading two scripts from my index.html file as shown below: <script src="replacements.js"></script> <script src="socket.js">&l ...

Tips for capturing your desktop screen within an angular 2+ application

I am in need of a solution to share my desktop screen using Angular 6. I have done some research to find the right package for this feature but have been unsuccessful so far. I came across various packages such as RecordRTC, Aperture, and screen-capture-r ...

A guide on simulating childprocess.exec in TypeScript

export function executeCommandPromise(file: string, command: string) { return new Promise((resolve, reject) => { exec(command, { cwd: `${file}` }, (error: ExecException | null, stdout: string, stderr: string) => { if (error) { con ...

Clicking on the mat-icon-button with the matSuffix in the password field will always trigger a

Seeking assistance with implementing mat-icon-button matSuffix in Angular for a login page. This is my first time working with Angular and I am facing an issue with the password field. I have used mat-icon-button matSuffix, but whenever I click on the ico ...

Sending additional parameters through an HTTP request in Angular

I've created a service method in Angular 8 with an optional parameter. However, I'm encountering a compile time error that says no overload matches this call. The error seems to be at the return statement. Can anyone help me figure out what' ...

What is the best way to transfer user input as a key value or variable from an HTML form to an Express.js application and then

Is it possible to dynamically pass user input as the key value? For example, instead of /hand-hold?handhold=userinput, I want the value entered by the user each time to be used. Any assistance on this matter would be greatly appreciated. app.component.ts ...

Error Encountered during Compilation of React TypesIs this okay

Currently, I am working on an MVC project that involves the use of TypeScript. To access the types required for this project, I have also integrated React. To obtain the React types, I performed an npm install --save-dev @types/react (similarly for react-d ...

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

I created an NPM package to easily reuse a class. The package installs correctly and I can load the class, but unfortunately I am unable to access functions within the class. My project is built using TypeScript which compiles into a JavaScript class: For ...

Unidentified Angular NgRX action

After building my Angular application using NgRX, I integrated actions, reducers, services, and effects. However, when trying to access the action in the component code, I encountered the following error: Error: Property 'GetEmployees' does no ...

Remove the hyphen from a user input field using Angular 2 and reactive forms

After deleting data from input fields, I am facing an issue where the dynamic addition of a hyphen prevents the input field from being cleared. Is there a solution to this problem? How can I delete or clear the input fields effectively? Although I have ad ...

I am looking to replicate a DOM element using Angular 4

I am interested in creating a clone of a DOM element. For example, if I have the following structure: <div> <p></p> <p></p> <p></p> <p></p> <button (click)="copy()"></button> & ...

Express encounters difficulty in processing Chunked Post Data

I am currently retrieving data from a Campbell Scientific data logger. This data is being posted to an application that is coded in Typescript using Express and BodyParser. The request successfully reaches the app (as I'm able to debug it), however, t ...

ng-bootstrap Datepicker with current date displayed as a placeholder

I have been using ng-bootstrap Datepicker and have implemented it like demonstrated in this example on Plunker. <div class="input-group"> <input class="form-control" placeholder="yyyy-mm-dd" name="dp" [(ngModel)]="model" ngbDatepicker ...