Question

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

 <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 =＆＃34; ngModel＆＃34;我在浏览器中收到此错误。

没有指令＆＃34; exportAs＆＃34;设置为＆＃34; ngModel＆＃34;

我放置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绑定到从未创建的隐式模型：#name="ngModel"和name="name"。

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

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

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

Answer 2

如果要在组件中引用输入元素，即自定义控件/子控件，则可以使用#nameofcontrol

为其指定引用名称

检查此答案：what is the difference between the #name and [(ngModel)]="name" in Angular2 Form input?

没有指令＆＃34; exportAs＆＃34;设置为＆＃34; ngModel＆＃34;在Angular

2 个答案: