[Solved] Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular CLI

Hey angular geek, if you have the Error NG8001: ‘Mat-Form-Field’ Is Not a Known Element in Angular, you are at the correct place to find the solution.

I was developing a mini project using Angular 9 at the front-end with the Angular material theme. I was a novice to the Angular at that time.

After some development, I tried to put a form field in a dialog box of an angular material theme. However, my code was not working out. The material theme was not applying to the input field I added to the dialog box. Even more, I was having an error that Mat-Form-Field is not a known element.

Error NG8001: Is Not a Known Element

The above error for any angular element occurs when we forget to import that element directives from the angular source to our working component.ts file.

However, when I tried to debug, I found that the input skin of the angular material theme was applied to the app.module.html file. And the same input field code was not working inside the dialog file.

But, I have already imported all the necessary components from the angular material directive. My code was as mentioned below.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent, GetStartedDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatInputModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

As you can see, all the necessary components are already imported in the app.module.ts file.

app.component.ts

import { Component } from '@angular/core';
import {MatDialog, MatDialogRef} from '@angular/material/dialog';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    const dialogRef = this.dialog.open(GetStartedDialog, {
      width: '300px'
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
    });
  }
}

@Component({
  selector: 'get-started-dialog',
  templateUrl: 'get-started-dialog.html',
})
export class GetStartedDialog {

  constructor(
    public dialogRef: MatDialogRef) {}

  onNoClick(): void {
    this.dialogRef.close();
  }

}

app.component.ts

<section class="mat-typography">
  <div>
    <button mat-raised-button color="primary" (click)="openDialog()">Get Started</button>
  </div>
</section>

get-started-dialog.html

<div mat-dialog-content style="text-align: center;">
    <h3 class="text-accent">Dialog</h3>
    <hr>
    <p>Enter your details.</p>
    <br>
    <mat-form-field class="full-width">
        <mat-label>Name</mat-label>
        <input matInput placeholder="Enter Your Full Name">
    </mat-form-field>
</div>

Solution

After some hours of research and debugging, I found that the angular generates dynamic content inside the dialog element.

So we have to add the dialog box class at declarations and entryComponents in the @NgModule in our module.ts file. My app.module.ts file was as follows after the change.

Updated app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent, GetStartedDialog } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import {MatToolbarModule} from '@angular/material/toolbar';
import {MatButtonModule} from '@angular/material/button';
import {MatDialogModule} from '@angular/material/dialog';
import {MatInputModule} from '@angular/material/input';

@NgModule({
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatToolbarModule,
    MatButtonModule,
    MatDialogModule,
    MatInputModule
  ],
  declarations: [
    AppComponent,
    GetStartedDialog
  ],
  entryComponents: [
    GetStartedDialog
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Explanation

As you can see, I added the GetStartedDialog class inside declarations and entryComponents, which helps the dialog box to compile its inside angular components/elements at the runtime.

Read Also: [Solved] Uncaught TypeError: Failed to Execute ‘createObjectURL’ on ‘URL’: No Function Was Found That Matched the Signature Provided

Conclusion

I hope now you can also resolve your problem of not having a material design of an Angular element inside the dialog box.

Please comment your problem below, I will be happy to help you.

Enjoy Debugging 😀

Leave a Reply

Your email address will not be published. Required fields are marked *

Read previous post:
Get All the Selected Checkbox Values jquery
How to Get Multiple Checkbox Value in jQuery Using Array

Some geeks still do not know about How to get multiple checkbox value in jQuery using array. In this article,...

Close