formgroup - Error de Angular2: no existe una directiva con "exportAs" establecido en "ngForm"

formularios en angular 5

Question

Estoy en el RC4 y obtengo el error No hay una directiva con "exportAs" establecido en "ngForm" debido a mi plantilla:

<div class="form-group">
        <label for="actionType">Action Type</label>
        <select
            ngControl="actionType" 
      ===>  #actionType="ngForm" 
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

los boot.ts:

import {disableDeprecatedForms, provideForms} from ''@angular/forms''; 

 import {bootstrap} from ''@angular/platform-browser-dynamic'';
 import {HTTP_PROVIDERS, Http} from ''@angular/http'';
 import {provideRouter} from ''@angular/router'';

import {APP_ROUTER_PROVIDER} from ''./routes'';

import {AppComponent} from ''./app.component'';

bootstrap(AppComponent, [ disableDeprecatedForms(), provideForms(), APP_ROUTER_PROVIDER, HTTP_PROVIDERS]);

/// así que aquí está mi DropdownList:

<fieldset ngControlGroup="linkedProcess" >
                     <div ngControlGroup="Process" >
                         <label>Linked Process</label>
                          <div class="form-group">       
        <select 
            ngModel
            name="label" 
            #label="ngModel" 
            id="label" 
            class="form-control" required
            (change)="reloadProcesse(list.value)" 
            #list>
            <option value=""></option>
            <!--<option value=`{{ActionFormComponent.getFromString(''GET'''')}}`></option>-->                 
            <option *ngFor="let processus of linkedProcess?.processList?.list; let i = index" 
            value="{{ processus[i].Process.label}}">
                {{processus.Process.label}}
            </option>
        </select> 
        </div>
     </div>

// mi componente ts:

Lo estaba representando en las formas antiguas como esta:

 categoryControlGroups:ControlGroup[] = [];
     categories:ControlArray = new ControlArray(this.categoryControlGroups);

y ahora estoy haciendo esto:

categoryControlGroups:FormGroup[] = [];
     categories:FormArray = new FormArray(this.categoryControlGroups);

crees que es la causa del problema?

Answer 1

Compruebe que tiene los ngModel and name en su selección. También Select es un componente de formulario y no todo el formulario, por lo que una declaración más lógica de referencia local será: -

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
            ngControl="actionType" 
      ===>  #actionType="ngModel"
            ngModel    // You can go with 1 or 2 way binding as well
            name="actionType"
            id="actionType" 
            class="form-control" 
            required>
            <option value=""></option>
            <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
                {{ actionType.label }}
            </option>
        </select> 
    </div>

Una cosa más importante es asegurarse de importar FormsModule en el caso del enfoque basado en plantillas o ReactiveFormsModule en el caso del enfoque reactivo. O puede importar ambos, que también está totalmente bien.

Answer 2

Desde 2.0.0.rc6 :

formularios : se han eliminado las funciones provideForms() y disableDeprecatedForms() desuso. En su lugar, importe el FormsModule o el ReactiveFormsModule desde @angular/forms .

En breve:

• Si usa formularios basados ​​en plantillas , agregue FormsModule a su @NgModule .
• Si utiliza formularios basados ​​en modelos, agregue ReactiveFormsModule a su @NgModule .

Entonces, agregue a su app.module.ts o equivalente:

import { NgModule }      from ''@angular/core'';
import { BrowserModule } from ''@angular/platform-browser'';
import { FormsModule, ReactiveFormsModule } from ''@angular/forms''; // <== add the imports!

import { AppComponent }  from ''./app.component'';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,                               // <========== Add this line!
    ReactiveFormsModule                        // <========== Add this line!
  ],
  declarations: [
    AppComponent
    // other components of yours
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

No tener uno de estos módulos puede provocar errores, incluido el que enfrenta:

No se puede vincular a ''ngModel'' ya que no es una propiedad conocida de ''input''.

No se puede vincular a ''formGroup'' ya que no es una propiedad conocida de ''form''

No existe una directiva con "exportAs" establecido en "ngForm"

Si tiene dudas, puede proporcionar tanto FormsModule como ReactiveFormsModule juntos, pero son completamente funcionales por separado. Cuando proporciona uno de estos módulos, las directivas de formularios y proveedores predeterminados de ese módulo estarán disponibles para toda la aplicación.

Viejos formularios usando ngControl ?

Si tiene esos módulos en su @NgModule , quizás esté usando directivas antiguas, como ngControl , lo cual es un problema, porque no hay ngControl en los nuevos formularios. Fue reemplazado más o menos * por ngModel .

Por ejemplo, el equivalente a <input ngControl="actionType"> es <input ngModel name="actionType"> , así que cámbielo en su plantilla.

Del mismo modo, la exportación en controles ya no es ngForm , ahora es ngModel . Entonces, en su caso, reemplace #actionType="ngForm" con #actionType="ngModel" .

Entonces la plantilla resultante debería ser ( ===> s donde se cambió):

<div class="form-group">
    <label for="actionType">Action Type</label>
    <select
  ===>  ngModel
  ===>  name="actionType" 
  ===>  #actionType="ngModel" 
        id="actionType" 
        class="form-control" 
        required>
        <option value=""></option>
        <option *ngFor="let actionType of actionTypes" value="{{ actionType.label }}">
            {{ actionType.label }}
        </option>
    </select> 
</div>

* Más o menos porque no toda la funcionalidad de ngControl se movió a ngModel . Algunos simplemente fueron eliminados o son diferentes ahora. Un ejemplo es el atributo de name , el mismo caso que está teniendo en este momento.

Answer 3

En mi caso, tuve que agregar FormsModule y ReactiveFormsModule a shared.module.ts también:

(gracias a @Undrium por el ejemplo de código ):

import { NgModule }                                 from ''@angular/core'';
import { CommonModule }                             from ''@angular/common'';
import { FormsModule, ReactiveFormsModule }         from ''@angular/forms'';

@NgModule({
  imports:      [
    CommonModule,
    ReactiveFormsModule
  ],
  declarations: [],
  exports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ]
})
export class SharedModule { }

Answer 4

La forma correcta de usar formularios ahora en Angular2 es:

<form  (ngSubmit)="onSubmit()">

        <label>Username:</label>
        <input type="text" class="form-control"   [(ngModel)]="user.username" name="username" #username="ngModel" required />

        <label>Contraseña:</label>
        <input type="password" class="form-control"  [(ngModel)]="user.password" name="password" #password="ngModel" required />


    <input type="submit" value="Entrar" class="btn btn-primary"/>

</form>

La vieja forma ya no funciona

Answer 5

Me enfrenté al mismo problema. Me había perdido la etiqueta de importación del módulo de formularios en app.module.ts

import { FormsModule } from ''@angular/forms'';

@NgModule({
    imports: [BrowserModule,
        FormsModule
    ],

Answer 6

Si estás recibiendo esto en su lugar:

Error: errores de análisis de plantilla:

No hay una directiva con "exportAs" establecido en " ngModel "

Lo que se informó como un error en github , entonces probablemente no sea un error, ya que podría:

1. tiene un error de sintaxis (por ejemplo, un paréntesis adicional: [(ngModel)]]= ), O
2. estar mezclando directivas de formularios reactivos , como formControlName , con la directiva ngModel . Esto "ha quedado en desuso en Angular v6 y se eliminará en Angular v7" , ya que combina ambas estrategias de formulario, lo que hace que:

• parece que se está utilizando la directiva ngModel real, pero de hecho es una propiedad de entrada / salida llamada ngModel en la directiva de forma reactiva que simplemente aproxima (algunos de) su comportamiento. Específicamente, permite obtener / establecer el valor e interceptar eventos de valor. Sin embargo, algunas de las otras características de ngModel , como retrasar las actualizaciones con ngModel Opciones de ngModel o exportar la directiva, simplemente no funcionan (...)

• Este patrón combina estrategias basadas en plantillas y formas reactivas, que generalmente no recomendamos porque no aprovecha todos los beneficios de ninguna de las estrategias . (...)

• Para actualizar su código antes de la v7, querrá decidir si se apega a las directivas de forma reactiva (y obtener / establecer valores usando patrones de formas reactivas) o cambiar a directivas basadas en plantillas .

Cuando tienes una entrada como esta:

<input formControlName="first" [(ngModel)]="value">

Mostrará una advertencia sobre estrategias de forma mixta en la consola del navegador:

Parece que está usando ngModel en el mismo campo de formulario que formControlName .

Sin embargo, si agrega ngModel como un valor en una variable de referencia, por ejemplo:

<input formControlName="first" #firstIn="ngModel" [(ngModel)]="value">

El error anterior se activa y no se muestra ninguna advertencia sobre la combinación de estrategias.

Answer 7

También me di cuenta de que este problema surge cuando se trata de combinar enfoques de forma reactiva y de plantilla. Tenía #name="ngModel" y [formControl]="name" en el mismo elemento. Eliminar cualquiera de los dos solucionó el problema. Además, si usa #name=ngModel , también debería tener una propiedad como esta [(ngModel)]="name" , de lo contrario, seguirá recibiendo los errores. Esto también se aplica a los ángulos 6, 7 y 8.

Answer 8

Tuve el mismo problema que se resolvió agregando FormsModule a .spec.ts:

import { FormsModule } from ''@angular/forms'';

y luego agregando la importación a beforeEach:

beforeEach(async(() => {
  TestBed.configureTestingModule({
    imports: [ FormsModule ],
    declarations: [ YourComponent ]
  })
.compileComponents();
}));

Answer 9

Tuve este problema porque tenía un error tipográfico en mi plantilla cerca de [(ngModel)]]. Soporte extra Ejemplo:

<input id="descr" name="descr" type="text" required class="form-control width-half"
      [ngClass]="{''is-invalid'': descr.dirty && !descr.valid}" maxlength="16" [(ngModel)]]="category.descr"
      [disabled]="isDescrReadOnly" #descr="ngModel">

Answer 10

Tuve este problema y me di cuenta de que no había vinculado mi componente a una variable.

Cambiado

<input #myComponent="ngModel" />

a

<input #myComponent="ngModel" [(ngModel)]="myvar" />