Readdy Write  
0,00 €
Your View Money
Views: Count
Self 20% 0
Your Content 60% 0

Users by Links 0
u1*(Content+Views) 10% 0
Follow-Follower 0
s2*(Income) 5% 0

Count
Followers 0
Login Register as User

Angular Errors NG8001 'mat-form-field' is not a known element + NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.

03.02.2021 (👁397)

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 {MatInputModulefrom '@angular/material/input';

import {FormsModulefrom '@angular/forms';

 

 

@

NgModule ..Impots:

  imports: [

    ..

    FormsModule,

    MatInputModule

  ],

 

 

 

Component.ts

Inpute01.component.ts

import { ComponentOnInit } 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 {MatInputModulefrom '@angular/material/input';

import {FormsModulefrom '@angular/forms';

@NgModule({

  declarations: [

    AppComponent,

    Input01Component

  ],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    FormsModule,

    MatInputModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }