Question

我学习了Angular，现在我在调试时遇到了Angular Template解析错误：我认为这与丢失导入无关，也许还有一些错误的命名。我使用Visual Studio作为编辑器

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

这是我的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>

请告知我在做什么错。我使用Visual Studio

这是我的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"
  }
}

Answer 1

将ReactiveFormsModule导入您的根模块。

import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
    .....,
    imports: [
        .....
        ReactiveFormsModule
        .....
    ],
    .....
})
export class AppModule {
    .....
}

为什么我在Angular中收到此模板解析错误

1 个答案: