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

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

错误：

没有将"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

在我的例子中，使用角11，我将输入字段绑定到模板变量(即(ngModel)="UserNameSearch")，而不是组件属性，因为我与模板变量具有相同的属性名。我将组件属性更改为camel case，并使用它绑定并工作。

(ngModel)="UserNameSearch“之前的(绑定到模板变量)

​

(ngModel)="userNameSearch“(绑定到组件属性)之后的

​

​