Angular 4中的模板解析错误“没有将exportAs设置为ngModel的指令”答案

【问题标题】：Template Parsing Error "There is no directive with exportAs set to ngModel" in Angular 4Angular 4中的模板解析错误“没有将exportAs设置为ngModel的指令”
【发布时间】：2018-09-02 12:42:20
【问题描述】：

我已经创建了一个示例项目，其中我使用了具有注册名称的组件和具有登录名称的组件，同时验证注册页面给我下面提到的错误

表单验证时出现错误

>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>

这是我导入 FormsModule 的 app.module.ts 文件

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 { }

【问题讨论】：

您是否将FormsModule 导入到您的app.module.ts 中？
There is no directive with "exportAs" set to "ngForm"的可能重复
是的，我已将 FormsModule 添加到我的 app.module.ts 中

标签： angular angular-forms

【解决方案1】：

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

之前：[(ngModel)]="UserNameSearch"（绑定到模板变量）

之后：[(ngModel)]="userNameSearch"（绑定到组件属性）

【讨论】：

【解决方案2】：

错误：

没有将“exportAs”设置为“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'}" />
     ^^^^^^^^^

【讨论】：