angular - Angular 中没有将 "exportAs"设置为 "ngModel"的指令

Question

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

 <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"时，我在浏览器中收到此错误。

没有将“exportAs”设置为“ngModel”的指令

我放置的FormsModule就是各自的module.ts文件。我在 component.ts 文件中各自的导入看起来像这样。

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

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

所以我的版本是， Angular CLI:1.7.0节点:6.11.4操作系统:linux x64

有人可以帮忙吗？我不明白确切的问题在哪里。

Answer 1

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

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

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

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