Angular Errors NG8001 NG8002: 'mat-form-field' is not a known element
Can't bind to 'ngModel'
Und NG8002
NG8002
: Can't bind to 'ngModel' since it isn't a known property of 'input'.
Error Messages in ng serve, build
Error: error NG8001 : 'mat-form-field' is not a known element: 1. If 'mat-form-field' is an Angular component, then verify that it is part of this module. 2. If 'mat-form-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. |
error NG8002 : Can't bind to 'ngModel' since it isn't a known property of 'input'. |
Fehlermeldung in VS Code in ng serve
Solution:
Insert FormsModule and MatInputModule in app.modules.ts
Import
import {MatInputModule} from '@angular/material/input'; import {FormsModule} from '@angular/forms'; |
@
NgModule ..Impots:
imports: [ .. FormsModule, MatInputModule ], |
Component.ts
Inpute01.component.ts
import { Component, OnInit } from '@angular/core';
@Component({ selector: 'app-input01', templateUrl: './input01.component.html', styleUrls: ['./input01.component.css'] }) export class Input01Component implements OnInit {
inputvalue:string="abc";
constructor() { }
ngOnInit(): void { } } |
Component.HTML
Input01.compontent.html
inputvalue={{inputvalue}} <br> <br> <form > <mat-form-field class=""> <mat-label>Inputfield 01:</mat-label> <input type="text" matInput [(ngModel)]="inputvalue" > </mat-form-field> </form>
|
Solution:
✔
Solution in app.modules.ts
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core';
import { AppComponent } from './app.component'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; import { Input01Component } from './components/input01/input01.component';
import {MatInputModule} from '@angular/material/input'; import {FormsModule} from '@angular/forms';
@NgModule({ declarations: [ AppComponent, Input01Component ], imports: [ BrowserModule, BrowserAnimationsModule, FormsModule, MatInputModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }
|