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

Question

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

表单验证时，会发生错误

>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

错误：

  

没有指令将“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'}" />
     ^^^^^^^^^

Answer 2

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

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

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