问题
I learn Angular and now I get this Angular Template parse errors when debugging: I dont think this has to do with missing import its more some wrong naming maybe. I use Visual Studio as editor
Error: Template parse errors:
Can't bind to 'formGroup' since it isn't a known property of 'form'. ("t-card>
<mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
<form [ERROR ->][formGroup]="newContact" class="form-container">
<mat-form-field>
"): ng:///AppModule/SearchBooksComponent.html@2:8
No provider for ControlContainer ("<mat-card>
<mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
[ERROR ->]<form [formGroup]="newContact" class="form-container">
<mat-form-field>
"): ng:///AppModule/SearchBooksComponent.html@2:2
No provider for NgControl ("
<mat-form-field>
[ERROR ->]<input type="text" matInput placeholder="Name" formControlName="name">
<mat-error *ngIf="formC"): ng:///AppModule/SearchBooksComponent.html@5:6
No provider for NgControl ("
<mat-form-field>
[ERROR ->]<mat-select placeholder="Type" formControlName="type">
<mat-option [value]="1">
W"): ng:///AppModule/SearchBooksComponent.html@12:6
No provider for NgControl ("
<mat-form-field>
[ERROR ->]<input type="tel" matInput placeholder="Number" formControlName="number">
<mat-error *ngIf="fo"): ng:///AppModule/SearchBooksComponent.html@29:6
This is my search-books.component.html
<mat-card>
<mat-card-header><mat-card-title>New Contact</mat-card-title></mat-card-header>
<form [formGroup]="newContact" class="form-container">
<mat-form-field>
<input type="text" matInput placeholder="Name" formControlName="name">
<mat-error *ngIf="formControlName.hasError('required')">
Name is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-select placeholder="Type" formControlName="type">
<mat-option [value]="1">
Work
</mat-option>
<mat-option [value]="2">
Cellphone
</mat-option>
<mat-option [value]="3">
Home
</mat-option>
</mat-select>
<mat-error *ngIf="formControlName.hasError('required')">
Type is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field>
<input type="tel" matInput placeholder="Number" formControlName="number">
<mat-error *ngIf="formControlName.hasError('required')">
Number is <strong>required</strong>
</mat-error>
</mat-form-field>
<button mat-raised-button class="submitForm" (click)="addContact()">Save</button>
</form>
</mat-card>
<button mat-raised-button (click)="goBack()" class="backButton" title="Go Back"><i class="material-icons">chevron_left</i>Back</button>
Please advice what i´m doing wrong. I use Visual Studio
This is my Package.json
{
"name": "client-app",
"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": "^8.0.1",
"@angular/cdk": "^8.0.1",
"@angular/common": "~8.0.0",
"@angular/compiler": "~8.0.0",
"@angular/core": "~8.0.0",
"@angular/forms": "~8.0.0",
"@angular/material": "^8.0.1",
"@angular/platform-browser": "~8.0.0",
"@angular/platform-browser-dynamic": "~8.0.0",
"@angular/router": "~8.0.0",
"angular-route": "^1.7.8",
"bootstrap": "^4.3.1",
"rxjs": "~6.4.0",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.800.0",
"@angular/cli": "~8.0.2",
"@angular/compiler-cli": "~8.0.0",
"@angular/language-service": "~8.0.0",
"@types/node": "~8.9.4",
"@types/jasmine": "~3.3.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.0",
"jasmine-core": "~3.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.15.0",
"typescript": "~3.4.3"
}
}
回答1:
Import ReactiveFormsModule
into your root module.
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
.....,
imports: [
.....
ReactiveFormsModule
.....
],
.....
})
export class AppModule {
.....
}
来源:https://stackoverflow.com/questions/56608470/why-do-i-get-this-template-parse-errors-in-angular