The element 'mat-form-field' is unrecognized in Angular 9 and Material 9.2.0 version

Greetings! I am currently utilizing Angular 9 and here is the code snippet I am working with: The HTML component named "post-create.component.html":

<mat-mat-form-field>
  <textarea rows="6" [(ngModel)]="enteredValue"></textarea>
</mat-mat-form-field>

Here is my app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatCardModule } from '@angular/material/Card';
import { MatInputModule } from '@angular/material/input';



import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { PostCreateComponent } from './posts/post-create/post-create.component';
import { from } from 'rxjs';


@NgModule({
  declarations: [
    AppComponent,
    PostCreateComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    BrowserAnimationsModule,
    MatInputModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json

{
  "name": "mean-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}
{
  "name": "mean-course",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/cdk": "^9.2.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/material": "^9.2.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.901.0",
    "@angular/cli": "~9.1.0",
    "@angular/compiler-cli": "~9.1.0",
    "@angular/language-service": "~9.1.0",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.1.2",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.4.1",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~3.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~3.8.3"
  }
}

I seem to be missing the definition of the mat-... tags, but I am unsure where exactly I need to place these definitions. Can anyone provide some guidance on this matter?

angulartypescriptangular-materialangular9

Answer №1

Ensure that you include MatFormFieldModule in your AppModule

import { MatFormFieldModule } from '@angular/material/form-field';
...
@NgModule({
    imports: [
        ...
        MatFormFieldModule
    ]
})

Answer №2

Sorry for the delayed response, but I encountered the same issue and was able to resolve it by simply installing jQuery and including it in the script. Follow these steps:

  1. Correct the typo by replacing ""mat-mat-form-field"" with ""mat-form-field"".
  2. Run the command "npm install jquery --save".
  3. Add the path ""./node_modules/jquery/dist/jquery.min.js"" to the angular.json file under the "scripts" section.

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

Navigating using ViewChild in Ionic 2 Beta

I recently updated my Ionic 2 app to use Angular 2 RC1, which has been a great improvement. However, I am facing some challenges with the routing implementation. Despite following the update guide, I still encounter issues with my navigation component bein ...

angularroutesionic2

The `Required<Partial<Inner>>` does not inherit from `Inner`

I stumbled upon a code snippet that looks like this: type Inner = { a: string } type Foo<I extends Inner> = { f: I } interface Bar<I extends Inner> { b: I } type O<I extends Partial<Inner>> = Foo<Required<I>> & B ...

typescript

The Updating Issue: Angular 2 Table Fails to Reflect Value Changes

I have initialized a table with user details using the ngOnInit() method. When I click on the "create user" button, it opens a form to add a new user to the database. However, the table does not update automatically with the new user's information. H ...

angulartypescript

How can you manage state with ContextAPI and Typescript in a React application?

I seem to be facing an issue that I can't quite figure out. I have experience using ContextAPI without TypeScript, and I believe I'm implementing TypeScript correctly. However, something seems off as nothing happens when I call the setter. My goa ...

reactjstypescriptreact-statereact-typescriptreact-context

Changing Angular Material datepicker format post form submission

After selecting a date, the input field is populated with a format like DD/MM/YYYY Now, when attempting to send this data through a form and logging it in my component, datapicker.component.ts onFindAWhip(form: NgForm){ const value = form.value; ...

angularangular-material2

React/Typescript - Managing various event types within a unified onChange function

In my current project, I am working with a form that includes various types of input fields using the mui library. My goal is to gather the values from these diverse input components and store them in a single state within a Grandparent component. While I ...

reactjstypescriptnext.jsmaterial-ui

ApolloClient encounters type mismatches with ApolloLink

Struggling with creating ApolloClient using TypeScript, encountering type-errors that I'm unable to resolve. Seeking guidance on what steps to take next. Provided below is a snippet of the code (functions fine with JavaScript) for setting up the clie ...

reactjstypescriptapollo-client

In Angular 2, I am having trouble reaching the properties of an object nested inside another object

I have a variable named contact. When I used console.log(contact) to display its contents, this is what I got: addresss:[] company:"" emails:[] id:3 internet_calls:[] lat:"10.115730000000001" lng:"76.461445" name:"Diji " phones:[] special_days:[] timesta ...

angulartypescriptionic2

Unclear value of button when being passed

In my Welcome.html file, I am attempting to send the value of a button to a function that simply logs that value. This function is located in a functions class that has been imported into my welcome.ts file. <ion-content padding id="page1"> <h1 ...

javascripthtmltypescriptionic-framework

Unable to loop through the Array

let Users = [ { name: 'John', id: '1', jp: 'USA' }, { name: 'Jane', id: '2', jp: 'Japan' }, ]; export function DisplayUsers(usersList) { return ( <div> {usersList?.map((user ...

reactjstypescript

Find out whether the page was reloaded or accessed directly through a hyperlink

I need to find out if the page was accessed directly via a link. If it was, I need to perform a certain action. However, my current implementation is not working as intended, as even a page refresh triggers this action. Is there an alternative method to ch ...

javascriptreactjstypescript

How to effectively manage radio buttons in Angular 6

Here are some questions I have listed below. public QandAList = [ { question:{ id: "Q1", query:"What is the capital of France?" }, options:[ { id: "opt1", text: "Paris" }, ...

angulartypescriptangular6

Retrieve the value of an object without relying on hardcoded index values in TypeScript

I am working with an object structure retrieved from an API response. I need to extract various attributes from the data, which is nested within another object. Can someone assist me in achieving this in a cleaner way without relying on hardcoded indices? ...

javascripttypescript

Integrate a formcontrol within a specialized directive

I am looking to develop a directive that can alter a host element when a form control is invalid. Here's an example in code: <div [appFormControlValidate]="email"> <!-- email is the form control I want to use --> <input type="email" ...

angularangular2-formsangular-reactive-forms

The width of Kendo Angular 2 grids pager and top header does not increase when scrolling

Our grids now have the horizontal scrolling feature enabled through CSS (kendo-grid {overflow: auto;}). However, we've noticed that the pager and top header of the grids do not expand their width when scrolling. Take a look at the screenshot below: ...

angularkendo-ui-angular2

In ReactJS with TypeScript, declaring a constant response after calling the login function using the await keyword

Currently tackling a task in React and Typescript where I am logging in as a user. Encountering an issue when trying to access the response variable, which leads to the following error: Object is of type 'unknown'.ts(2571) const response: unknow ...

reactjstypescriptaxios

How is it possible for a TypeScript function to return something when its return type is void?

I find the book Learning JavaScript to be confusing. It delivers conflicting information regarding the use of void as a return type in functions. const foo = (s: string): void => { return 1; // ERROR } At first, it states that if a function has a re ...

typescript

What is the best way to send the body in a GET request using Angular 2+?

My API's GET method is located at "http://abc/abc" Typically, the GET method includes parameters as get(url, options), with only two arguments. However, in my scenario, I need to include a body with the request. The body structure is as follows: { ...

typescriptangular6angular5

Detecting Typescript linting issues in VSCode using Yarn version 3.2.3

Every time I try to set up a new react or next app using the latest yarn v3.2.3, my VS Code keeps showing linting errors as seen in the screenshot below. The main error it displays is ts(2307), which says Cannot find module 'next' or its correspo ...

reactjstypescriptnext.jsyarnpkgyarn-v3

Angular 5: There was an issue with the property not defined for lowercase conversion

I keep encountering this error whenever I attempt to filter a column of a table. The data is retrieved from a FireStore cloud collection and the 'auteur' field is defined in each document. Here is how my component looks: import { Component, OnI ...

javascriptangularangular5