ERROR in src/app/Register/register.component.html:12:9 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'input'.
12 [(ngModel)]="model.UserName"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/Register/register.component.ts:6:16
6 templateUrl: "./register.component.html",
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component RegisterComponent.
src/app/Register/register.component.html:3:24 - error NG8003: No directive found with exportAs 'ngForm'.
3 <form #registerForm="ngForm">
~~~~~~
src/app/Register/register.component.ts:6:16
6 templateUrl: "./register.component.html",
~~~~~~~~~~~~~~~~~~~~~~~~~~~
Error occurs in the template of component RegisterComponent.
这个错误不断出现——我检查了所有的东西，看起来都很好。尝试了很多次。当我遇到wierd问题时，我怀疑Angular版本或依赖性问题。我已经检查了许多在线示例，没有发现我的代码有任何错误。
这是我的app.module.ts
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
import { AppComponent } from "./app.component";
import { LoginComponent } from "./login/login.component";
import { RegisterComponent } from "./register/register.component";
import { TasksComponent } from "./tasks/tasks.component";
import { TemplatesComponent } from "./templates/templates.component";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { MatTabsModule } from "@angular/material/tabs";
import { MatButtonModule } from "@angular/material/button";
import { MatButtonToggleModule } from "@angular/material/button-toggle";
@NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent,
TasksComponent,
TemplatesComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatTabsModule,
MatButtonModule,
MatButtonToggleModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
这是我的注册模块模板：
<div class="container">
<h1>Registration Form</h1>
<form #registerForm="ngForm">
<div class="form-group">
<label for="name">Name</label>
<input
type="text"
class="form-control"
id="name"
required
[(ngModel)]="model.UserName"
/>
</div>
<div class="form-group">
<label for="alterEgo">Alter Ego</label>
<input type="text" class="form-control" id="alterEgo" />
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
注册TS文件：
import { RegistrationModel } from "./../model/RegistrationModel";
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-register",
templateUrl: "./register.component.html",
styleUrls: ["./register.component.css"]
})
export class RegisterComponent implements OnInit {
constructor() {}
model = new RegistrationModel();
ngOnInit(): void {}
}
路由器模块TS
import { NgModule } from "@angular/core";
import { Routes, RouterModule } from "@angular/router";
import { LoginComponent } from "./Login/login.component";
import { RegisterComponent } from "./Register/register.component";
import { TasksComponent } from "./tasks/tasks.component";
import { TemplatesComponent } from "./templates/templates.component";
const routes: Routes = [
{ path: "", redirectTo: "login", pathMatch: "full" },
{ path: "login", component: LoginComponent },
{ path: "register", component: RegisterComponent },
{ path: "tasks", component: TasksComponent },
{ path: "templates", component: TemplatesComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
RegistrationModel.ts文件：
import { Time } from "@angular/common";
export class RegistrationModel {
private userId: number;
private userName: string;
private active: boolean;
private createTimeStamp: Time;
private dayPhoneNumber: string;
private eveningPhoneNumber: string;
private cellPhoneNumber: string;
private addressStreet: string;
private city: string;
private state: string;
private country: string;
private password: string;
private emailAddress: string;
get UserId() {
return this.userId;
}
set UserId(value) {
this.userId = value;
}
get UserName() {
return this.userName;
}
set UserName(value) {
this.userName = value;
}
get Active() {
return this.active;
}
set Active(value) {
this.active = value;
}
get CreateTimeStamp() {
return this.createTimeStamp;
}
set CreateTimeStamp(value) {
this.createTimeStamp = value;
}
get DayPhoneNumber() {
return this.dayPhoneNumber;
}
set DayPhoneNumber(value) {
this.dayPhoneNumber = value;
}
get CellPhoneNumber() {
return this.cellPhoneNumber;
}
set CellPhoneNumber(value) {
this.cellPhoneNumber = value;
}
get EveningPhoneNumber() {
return this.eveningPhoneNumber;
}
set EveningPhoneNumber(value) {
this.eveningPhoneNumber = value;
}
get AddressStreet() {
return this.addressStreet;
}
set AddressStreet(value) {
this.addressStreet = value;
}
get City() {
return this.city;
}
set City(value) {
this.city = value;
}
get State() {
return this.state;
}
set State(value) {
this.state = value;
}
get Country() {
return this.country;
}
set Country(value) {
this.country = value;
}
get EmailAddress() {
return this.emailAddress;
}
set EmailAddress(value) {
this.emailAddress = value;
}
get Password() {
return this.password;
}
set Password(value) {
this.password = value;
}
constructor() {}
}
Package.json文件
{
"name": "gui7",
"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": "~9.0.5",
"@angular/cdk": "^9.1.3",
"@angular/common": "~9.0.5",
"@angular/compiler": "~9.0.5",
"@angular/core": "~9.0.5",
"@angular/forms": "~9.0.5",
"@angular/material": "^9.1.3",
"@angular/platform-browser": "~9.0.5",
"@angular/platform-browser-dynamic": "~9.0.5",
"@angular/router": "~9.0.5",
"rxjs": "~6.5.4",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.900.5",
"@angular/cli": "~9.0.5",
"@angular/compiler-cli": "~9.0.5",
"@angular/language-service": "~9.0.5",
"@types/node": "^12.11.1",
"@types/jasmine": "~3.5.0",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.1.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.3.0",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.0",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "^1.4.2",
"protractor": "~5.4.3",
"ts-node": "~8.3.0",
"tslint": "~5.18.0",
"typescript": "~3.7.5"
}
}
我可以建议您将"ngForm"指令添加到"form"标记中。
<form ngForm #registerForm="ngForm"></form
肯定还有另一个错误将紧随其后。要调整它，您可能需要在输入中添加一个"name"属性。
<input
type="text"
class="form-control"
id="name"
required
[(ngModel)]="model.UserName"
/>
至
<input
type="text"
class="form-control"
id="name"
name="azerty"
required
[(ngModel)]="model.UserName"
/>