Búsqueda de sitios web

angular - Angular2 Error: No hay ninguna directiva con "exportAs" establecido en "ngForm"

Estoy en la RC4 y estoy obteniendo el error No hay ninguna directiva con "exportAs" configurada como "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>

el 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 así:

 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?

Respuesta #1

Desde 2.0.0.rc6:

formularios: las funciones obsoletas provideForms() y disableDeprecatedForms() han sido eliminadas. Por favor, importe el FormsModule o el ReactiveFormsModule de @angular/forms en su lugar.

En resumen:

  • Si utilizas formularios basados en plantillas, agrega FormsModule a tu @NgModule.
  • Si utilizas formularios basados en modelos, agrega ReactiveFormsModule a tu @NgModule.

Así que, agrega a tu 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 conducir a errores, incluido el que enfrentas:

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

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

No hay ninguna directiva con "exportAs" configurada como "ngForm"

Si tienes dudas, puedes proporcionar tanto el FormsModule como el ReactiveFormsModule juntos, pero son completamente funcionales por separado. Cuando proporcionas uno de estos módulos, las directivas y proveedores de formularios predeterminados de ese módulo estarán disponibles en toda tu aplicación.

¿Formas antiguas usando ngControl?

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

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

De manera similar, la exportación en los controles ya no es ngForm, ahora es ngModel. Entonces, en tu caso, reemplaza #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 trasladó a ngModel. Algunas simplemente fueron eliminadas o ahora son diferentes. Un ejemplo es el atributo name, el mismo caso que estás teniendo ahora.

Respuesta #2

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

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

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

Artículos relacionados