Angular 中的模板解析错误 "There is no directive with exportAs set to ngModel" 4

Question

我创建了一个示例项目，其中我在验证注册页面时使用注册名称进入组件一，使用登录名称进入组件一，出现下面提到的错误

表单验证时，出现错误

>Uncaught Error: Template parse errors:
There is no directive with "exportAs" set to "ngModel" ("
        </div>
        <div>
          <input type="email" name="emailId" placeholder="Email" [ERROR ->]#email="ngModel" [ngModelOptions]="{updateOn: 'change'}" />
        </div>

这是我的注册组件，我在其中创建了一个表单并尝试验证该表单

registration.component.html

    <form #varSubmit="ngForm" (ngSubmit)="onSubmit(varSubmit)" novalidate>
        <div>
          <div>
            <input type="text" name="fName" placeholder="First Name" required />
          </div>
        </div>
        <div>
          <div>
            <input type="text" name="lName" placeholder="Last Name" required/>
          </div>
        </div>
        <div>
          Date of Birth:
          <input type="date" name="dob" />
        </div>
        <div>Gender:
          <input type="radio" value="rbtnMale" name="gender" checked/>
          <label for="rbtnMale">Male</label>
          <input type="radio" value="rbtnFemale" name="gender" />
          <label for="rbtnFemale">Female</label>
        </div>
        <div>
          <input type="email" name="emailId" placeholder="Email" #email="ngModel" [ngModelOptions]="{updateOn: 'change'}" />
        </div>
        <div [hidden]="email.pristine || email.valid">Email Shouldnt Empty...!</div>
        <div>
          <div>
            <input type="password" name="pwd" placeholder="Password" />
          </div>
        </div>
        <div>
          <div>
            <input type="password" name="cPwd" placeholder="Confirm Password" />
          </div>
        </div>
        <div>
          <input type="submit" name="btnSubmit" />
          <input type="reset" name="btnReset" />
        </div>
      </form>

这是我的 app.module.ts 文件，我在其中导入 FormsModule

app.module.ts 页数

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, Component } from '@angular/core';

import { AppComponent } from './app.component';
import { LoginComponentComponent } from './login-component/login-component.component';
import { FormsModule } from '@angular/Forms';
import { UserRegistrationComponent } from './user-registration/user-registration.component';
import { RouterModule } from '@angular/router';


@NgModule({
  declarations: [
    AppComponent,
    LoginComponentComponent,
    UserRegistrationComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot([
      {
        path: 'login-component',
        component: LoginComponentComponent
      },
      {
        path: 'user-registration',
        component: UserRegistrationComponent
      },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

错误：

There is no directive with "exportAs" set to "ngModel"

告诉我们我们要么：

忘记导入专用模块
忘记向声明数组添加指令
没有在元素上应用指令

查看您的代码：

<input type="email" name="emailId" placeholder="Email" #email="ngModel" 
      [ngModelOptions]="{updateOn: 'change'}" />

我注意到此元素上没有任何属性 ngModel 或属性绑定 [ngModel]。

所以从添加 ngModel 属性开始。

<input type="email" name="emailId" placeholder="Email" #email="ngModel" 
      ngModel [ngModelOptions]="{updateOn: 'change'}" />
     ^^^^^^^^^

Answer 2

在我的例子中，使用 Angular 11，我将输入字段绑定到模板变量（即 [(ngModel)]="UserNameSearch"）而不是组件属性，因为我有相同的属性名称作为模板变量。我将我的组件属性更改为驼峰式大小写并使用它进行绑定并且它起作用了。

Before: [(ngModel)]="UserNameSearch"（绑定到模板变量）

After: [(ngModel)]="userNameSearch"（绑定到组件属性）

Angular 中的模板解析错误 "There is no directive with exportAs set to ngModel" 4

Template Parsing Error "There is no directive with exportAs set to ngModel" in Angular 4

angular

angular-forms