没有带有"exportAs"的指令，设置为"ngModel"在角 [英] There is no directive with "exportAs" set to "ngModel" in Angular

问题描述

我实际上正在处理表单，并且正在对每个字段进行验证.但是有一个问题我的component.html文件块看起来像这样，

I am actually working on a form and i am doing the validations for each field. but there is an issue. my block of component.html file looks like this,

 <div class="field"style="padding:1%">
      <label>Pacs name</label>

      <input 
      name ="name" 
      type="text" 
      [(ngModel)]="pacs.name" 
      formControlName="pacName" 
      required 
      pattern="[a-zA-Z][a-zA-Z ]+"
      #name="ngModel"
      >

  </div>

这是我正在研究的领域，但是当我使用#name ="ngModel"时，在浏览器中出现此错误.

This is the field i am working on but when i am using #name="ngModel" i am getting this error in browser.

没有将"exportAs"设置为"ngModel"的指令

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

我放置的FormsModule是相应的module.ts文件.和我在component.ts文件中的相应导入看起来像这样.

I placed FormsModule is the respective module.ts file. and my respective imports in component.ts file looks like this.

import { Component, OnInit,Directive, forwardRef, 
  Attribute,OnChanges, SimpleChanges,Input  } from '@angular/core';
import { FormsModule, ReactiveFormsModule,NG_VALIDATORS,Validator,
  AbstractControl,ValidatorFn } from '@angular/forms';
import { FormBuilder, FormGroup,FormControl, Validators, Form, NgForm} from '@angular/forms';

我认为可能存在版本问题，

I think there could be versioning problem,

所以我的版本是角CLI:1.7.0节点:6.11.4作业系统:linux x64

so my versions are, Angular CLI: 1.7.0 Node: 6.11.4 OS: linux x64

有人可以帮忙吗?我不知道确切的问题在哪里.

Could someone please help ? i am not understanding where is the exact problem.

推荐答案

一方面，您使用反应式API将此控件链接到从TS代码中显式创建的模型属性: formControlName ="pacName" .另一方面，您尝试通过模板驱动的API绑定到从未创建的隐式模型:#name ="ngModel" 和 name ="name"

On one hand, you use reactive API linking this control to the explicitly created model property from your TS code: formControlName="pacName". On the other, you're trying to bind to the never-created implicit model from the template-driven API: #name="ngModel" and name="name".

在模板驱动的API中，您可以执行以下操作:

In the template driven API you could do something like this:

<input type="text" name="username" ngModel #name="ngModel"> 

只需从您的代码中删除#name ="ngModel" 和 name ="name" .

Just remove #name="ngModel" and name="name" from your code.

这篇关于没有带有"exportAs"的指令，设置为"ngModel"在角的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！