Búsqueda de sitios web

typescript - No hay ninguna directiva con "exportAs" establecida en "ngModel" en Angular

En realidad estoy trabajando en un formulario y estoy haciendo las validaciones de cada campo. pero hay un problema. mi bloque del archivo component.html se ve así,

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

Este es el campo en el que estoy trabajando, pero cuando estoy usando #name="ngModel" estoy obteniendo este error en el navegador.

no hay ninguna directiva con "exportAs" configurada como "ngModel"

Coloqué FormsModule en el archivo module.ts respectivo. y mis importaciones respectivas en el archivo component.ts se ven así.

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

Creo que podría haber un problema de versiones.

así que mis versiones son, Angular CLI: 1.7.0 Node: 6.11.4 SO: linux x64

¿Alguien podría ayudarme, por favor? No entiendo dónde está el problema exacto.

Respuesta #1

Por un lado, usas la API reactiva vinculando este control a la propiedad de modelo creada explícitamente desde tu código TS: formControlName="pacName". Por otro lado, estás intentando enlazar al modelo implícito nunca creado desde la API basada en plantillas: #name="ngModel" y name="name".

En la API basada en plantillas podrías hacer algo como esto:

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

Solo elimina #name="ngModel" y name="name" de tu código.

Respuesta #2

Si quieres hacer referencia a tu elemento de entrada en un componente, es decir, un control personalizado/control hijo, entonces puedes darle un nombre de referencia con #nombredecontrol

Revisa esta respuesta: ¿cuál es la diferencia entre #name y [(ngModel)]="name" en un input de formulario de Angular2?

Artículos relacionados