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

LA SITUACIÓN:

¡Por favor ayuda! Estoy tratando de hacer lo que debería ser un formulario muy simple en mi aplicación Angular2, pero no importa lo que nunca funciona.

VERSIÓN ANGULAR:

Angular 2.0.0 Rc5

EL ERROR:

Can't bind to 'formGroup' since it isn't a known property of 'form'

EL CÓDIGO:

La vista:

<form [formGroup]="newTaskForm" (submit)="createNewTask()">
   <div class="form-group">
      <label for="name">Name</label>
      <input type="text" name="name" required>
   </div>
   <button type="submit" class="btn btn-default">Submit</button>
</form>

El controlador:

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder }  from '@angular/forms';
import {FormsModule,ReactiveFormsModule} from '@angular/forms';
import { Task } from './task';

@Component({
    selector: 'task-add',
    templateUrl: 'app/task-add.component.html'

})
export class TaskAddComponent {

    newTaskForm: FormGroup;

    constructor(fb: FormBuilder) 
    {
        this.newTaskForm = fb.group({
            name: ["", Validators.required]
        });
    }

    createNewTask()
    {
        console.log(this.newTaskForm.value)
    } 
}

El ngModule:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { routing }        from './app.routing';
import { AppComponent }  from './app.component';
import { TaskService } from './task.service'

@NgModule({
    imports: [ 
        BrowserModule,
        routing,
        FormsModule
    ],
    declarations: [ AppComponent ],
    providers: [
        TaskService
    ],
    bootstrap: [ AppComponent ]
})
export class AppModule { }

LA PREGUNTA:

¿Por qué recibo ese error?

¿Me estoy perdiendo de algo?

RC5 FIX

Es necesario que import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'en su controlador y añadirlo a directivesen @Component. Eso solucionará el problema.

Después de arreglar eso, probablemente obtendrá otro error porque no agregó formControlName="name"a su entrada en el formulario.

RC6 / RC7 / Versión final FIX

Para corregir este error, solo necesita importar ReactiveFormsModuledesde @angular/formssu módulo. Aquí está el ejemplo de un módulo básico con ReactiveFormsModuleimportación:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Para explicar más, formGrouphay un selector para la directiva nombrada FormGroupDirectiveque es parte de ReactiveFormsModule, de ahí la necesidad de importarlo. Se utiliza para vincular un elemento existente FormGroupa un DOM. Puede leer más sobre esto en la página de documentos oficiales de Angular .

Angular 4 en combinación con módulos de funciones (si, por ejemplo, está utilizando un módulo compartido) requiere que también exporte el archivo ReactiveFormsModulepara trabajar.

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

Bien, después de investigar un poco, encontré una solución para "No se puede enlazar a 'formGroup' ya que no es una propiedad conocida de 'form'".

Para mi caso, he estado usando varios archivos de módulos, agregué ReactiveFormsModule en app.module.ts

 import { FormsModule, ReactiveFormsModule } from '@angular/forms';`

@NgModule({
  declarations: [
    AppComponent,
  ]
  imports: [
    FormsModule,
    ReactiveFormsModule,
    AuthorModule,
],
...

Pero esto no funcionaba cuando uso una directiva [formGroup] de un componente agregado en otro módulo, por ejemplo, usando [formGroup] en author.component.ts que está suscrito en el archivo author.module.ts:

import { NgModule }       from '@angular/core';
import { CommonModule }   from '@angular/common';
import { AuthorComponent } from './author.component';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    AuthorComponent,
  ],
  providers: [...]
})

export class AuthorModule {}

Pensé que si agregaba ReactiveFormsModule en app.module.ts, de forma predeterminada ReactiveFormsModule sería heredado por todos sus módulos secundarios como author.module en este caso ... (¡incorrecto!). Necesitaba importar ReactiveFormsModule en author.module.ts para que todas las directivas funcionen:

...
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
  imports: [
    ...,
    FormsModule,    //added here too
    ReactiveFormsModule //added here too
  ],
  declarations: [...],
  providers: [...]
})

export class AuthorModule {}

Por lo tanto, si está utilizando submódulos, asegúrese de importar ReactiveFormsModule en cada archivo de submódulo. Espero que esto ayude a alguien.

Encontré este error durante la prueba unitaria de un componente (solo durante la prueba, dentro de la aplicación funcionó normalmente). La solución es importar ReactiveFormsModuleen .spec.tsarchivo:

// Import module
import { ReactiveFormsModule } from '@angular/forms';

describe('MyComponent', () => {
    beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            imports: [ReactiveFormsModule],  // Also add it to 'imports' array
        })
        .compileComponents();
    }));
});

La respuesta sugerida no funcionó para mí con Angular 4. En su lugar, tuve que usar otra forma de vinculación de atributos con el attrprefijo:

<element [attr.attribute-to-bind]="someValue">

El error dice que FormGroup no se reconoce en este módulo. Por lo tanto, debe importar estos módulos (a continuación) en cada módulo que usa FormGroup

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

Luego agregue FormsModule y ReactiveFormsModule en la matriz de importaciones de su Módulo .

imports: [
  FormsModule,
  ReactiveFormsModule
],

¿Puede estar pensando que ya lo agregué en AppModule y debería heredarlo? Pero no lo es. porque estos módulos exportan directivas obligatorias que solo están disponibles en la importación de módulos. Lea más aquí ... https://angular.io/guide/sharing-ngmodules .

Otros factores de estos errores pueden ser errores de ortografía como se muestra a continuación ...

[FormGroup] = "forma" de Capital F en lugar de pequeño f

[formsGroup] = "formulario" extra s después del formulario

Si tiene que importar dos módulos, agregue así a continuación

import {ReactiveFormsModule,FormsModule} from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent,
    HomeComponentComponent,
    BlogComponentComponent,
    ContactComponentComponent,
    HeaderComponentComponent,
    FooterComponentComponent,
    RegisterComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routes,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Tenga en cuenta que si ha definido "Módulos de funciones", deberá importar en el Módulo de funciones, incluso si ya lo ha importado al AppModule. De la documentación de Angular:

Los módulos no heredan el acceso a los componentes, directivas o canalizaciones que se declaran en otros módulos. Lo que importa AppModule es irrelevante para ContactModule y viceversa. Antes de que ContactComponent pueda vincularse con [(ngModel)], su ContactModule debe importar FormsModule.

https://angular.io/docs/ts/latest/guide/ngmodule.html

Tuve el mismo problema con Angular 7. Simplemente importe lo siguiente en su archivo app.module.ts.

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

Luego agregue FormsModule y ReactiveFormsModule a su matriz de importaciones.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Este problema ocurre debido a la falta de importación de FormsModule, ReactiveFormsModule. También vine con el mismo problema. Mi caso fue diferente. mientras trabajaba con módulos, así que me perdí las importaciones anteriores en mis módulos principales, aunque lo había importado en módulos secundarios, no funcionaba.

Luego lo importé a mis módulos principales como se muestra a continuación, ¡y funcionó!

import { ReactiveFormsModule,FormsModule  } from '@angular/forms';
import { AlertModule } from 'ngx-bootstrap';

         @NgModule({
          imports: [
            CommonModule,
            FormsModule,
            ReactiveFormsModule,
    ],
      declarations: [MyComponent]
    })

Me estaba encontrando con este error al intentar hacer las pruebas de e2e y me estaba volviendo loco que no hubiera respuestas para esto.

SI ESTÁ HACIENDO PRUEBAS, busque su archivo * .specs.ts y agregue:

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

Para la gente paseando por estos hilos sobre este error. En mi caso, tenía un módulo compartido donde solo exporté FormsModule y ReactiveFormsModule y olvidé importarlo. Esto provocó un extraño error de que los grupos de formularios no funcionaban en los subcomponentes. Espero que esto ayude a la gente a rascarse la cabeza.

UNA PEQUEÑA NOTA: Tenga cuidado con los cargadores y minimice (Rails env.):

Después de ver este error y probar todas las soluciones, me di cuenta de que había algo mal con mi cargador html.

Configuré mi entorno Rails para importar rutas HTML para mis componentes con éxito con este cargador ( config/loaders/html.js.):

module.exports = {
  test: /\.html$/,
  use: [ {
    loader: 'html-loader?exportAsEs6Default',
    options: {
      minimize: true
    }
  }]
}

Después de algunas horas de esfuerzos y un sinnúmero de importaciones ReactiveFormsModule vi que mi formGroupera minúsculas: formgroup.

Esto me llevó al cargador y al hecho de que redujo mi HTML a minimizar.

Después de cambiar las opciones, todo funcionó como debería y pude volver a llorar.

Sé que esta no es una respuesta a la pregunta, pero para los futuros visitantes de Rails (y otros con cargadores personalizados) creo que esto podría ser útil.

usar e importar REACTIVE_FORM_DIRECTIVES :

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent }  from './app.component';

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule
    ],
    declarations: [
        AppComponent
    ],
    bootstrap: [AppComponent]
})

export class AppModule { }

Si tiene este problema al desarrollar un componente, debe agregar estos dos módulos a su módulo más cercano:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
   // other modules
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Y si está desarrollando una prueba para sus componentes, debe agregar este módulo a su archivo de prueba de esta manera:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactusComponent } from './contactus.component';
import { ReactiveFormsModule } from '@angular/forms';

describe('ContactusComponent', () => {
  let component: ContactusComponent;
  let fixture: ComponentFixture<ContactusComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ContactusComponent],
      imports:[
        ReactiveFormsModule
      ]

    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(ContactusComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

Importar ReactiveFormsModule en el módulo correspondiente

Solución simple :

paso 1: importar ReactiveFormModule

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

paso 2: agregue "ReactiveFormsModule" a la sección de importación

imports: [

    ReactiveFormsModule
  ]

Paso 3: reinicia la aplicación y listo

Ejemplo:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import {ReactiveFormsModule} from '@angular/forms';
import { EscalationManagementRoutingModule } from './escalation-management-routing.module';
import { EscalationManagementRouteWrapperComponent } from './escalation-management-route-wrapper.component';


@NgModule({
  declarations: [EscalationManagementRouteWrapperComponent],
  imports: [
    CommonModule,
    EscalationManagementRoutingModule,
    ReactiveFormsModule
  ]
})
export class EscalationManagementModule { }

Importe y registre ReactiveFormsModule en su app.module.ts.

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

@NgModule({
declarations: [
AppComponent,
HighlightDirective,
TestPipeComponent,
ExpoentialStrengthPipe

],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Asegúrese de que su ortografía sea correcta tanto en el archivo .ts como en el .html. xxx.ts

  profileForm = new FormGroup({
  firstName: new FormControl(''),
 lastName: new FormControl('')
 });

archivo xxx.html-

  <form [formGroup]="profileForm"> 
  <label>
  First Name:
   <input type="text" formControlName = "firstName">
  </label>

  <label>
  Last Name:
   <input type="text" formControlName = "lastName">
   </label>
   </form>

Por error, escribí [FormGroup] en lugar de [formGroup]. Revisa tu ortografía correctamente en .html. No arroja un error de tiempo de compilación si hay algún problema en el archivo .html.

Nota : si está trabajando dentro del componente del módulo secundario, solo tiene que importar ReactiveFormsModule en el módulo secundario en lugar del módulo raíz de la aplicación principal

Tuve el mismo problema, asegúrese de que si usa submódulos (por ejemplo, no solo tiene app.component.module.ts, sino que tiene un componente separado como login.module.ts, que incluye la importación de ReactiveFormsModule en este inicio de sesión .module.ts import, para que funcione. Ni siquiera tengo que importar ReactiveFormsModule en mi app.component.module porque estoy usando submódulos para todo.

login.module.ts:

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

import { IonicModule } from '@ionic/angular';

import { LoginPageRoutingModule } from './login-routing.module';

import { LoginPage } from './login.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    ReactiveFormsModule,
    IonicModule,
    LoginPageRoutingModule
  ],
  declarations: [LoginPage]
})
export class LoginPageModule {}

Podría ayudar a alguien:

cuando tiene un formGroup en un modal (componente de entrada), entonces debe importar ReactiveFormsModule también en el módulo donde se instancia el modal.

No seas tonto como yo. Recibía el mismo error que el anterior, NINGUNA de las opciones en este hilo funcionó. Luego me di cuenta de que escribía con mayúscula 'F' en FormGroup. Doh!

En vez de:

[FormGroup]="form"

Hacer:

[formGroup]="form"

si esto es solo un error mecanografiado pero todo en su formulario funciona, es posible que tenga que reiniciar su IDE

Can't bind to 'formGroup' since it isn't a known property of 'form'

significa que intenta vincular una propiedad usando angular ( [prop]) pero angular no puede encontrar nada que sepa para ese elemento (en este caso form).

esto puede suceder al no usar el módulo correcto (falta una importación en algún lugar) y, a veces, solo causa un error tipográfico como:

[formsGroup], con sdespuésform

En primer lugar, no está relacionado con las versiones de Angular> 2 . Simplemente importe lo siguiente en su archivo app.module.ts para solucionar los problemas.

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

Luego agregue FormsModule y ReactiveFormsModule a su matriz de importaciones.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Nota : También puede importar ReactiveFormsModulea un módulo específico en lugar deapp.module.ts

importar {FormsModule, ReactiveFormsModule} desde '@ angular / forms'; y agréguelo en la matriz de importaciones en el archivo app-module.ts.

Mi solución fue sutil y no la vi en la lista.

Estaba usando formas reactivas en un componente de Diálogo de materiales angulares que no se declaró en app.module.ts. El componente principal se declaró en app.module.tsy abriría el componente de diálogo, pero el componente de diálogo no se declaró explícitamente en app.module.ts.

No tuve ningún problema al usar el componente de diálogo normalmente, excepto que el formulario arrojaba este error cada vez que abría el diálogo.

Can't bind to 'formGroup' since it isn't a known property of 'form'.

Tuve el mismo problema y el problema fue, de hecho, solo que olvidé importar y declarar el componente que contiene el formulario en el módulo:

import { ContactFormComponent } from './contact-form/contact-form.component';

@NgModule({
    declarations: [..., ContactFormComponent, ...],
    imports: [CommonModule, HomeRoutingModule, SharedModule]
})
export class HomeModule {}

Puede recibir este mensaje de error incluso si ya ha importado FormsModuley ReactiveFormsModule. Moví un componente (que usa la [formGroup]directiva) de un proyecto a otro, pero no pude agregar el componente a la declarationsmatriz en el nuevo módulo. Eso resultó en el Can't bind to 'formGroup' since it isn't a known property of 'form'mensaje de error.

He estado luchando con este error durante los últimos 3 días. Agregué ReactiveFormsModule y FormsModule como se menciona en los comentarios anteriores en mis dos módulos, pero no tuvo ningún efecto hasta que recargué mi proyecto con otro "ng serve". No sé por qué no se recargó automáticamente, ¡pero al menos me alegro de que finalmente haya funcionado! ¿Alguna explicación por favor?