No se puede vincular 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 una forma muy simple en mi aplicación Angular2, pero no importa lo que nunca funcione.

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 corregir 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, formGroupes un selector para la directiva nombrada FormGroupDirectiveque forma parte ReactiveFormsModule, de ahí la necesidad de importarlo. Se utiliza para vincular un elemento existente FormGroupa un elemento DOM. Puede leer más al respecto en la página de documentos oficiales de Angular .

Angular 4 en combinación con módulos de características (si está utilizando, por ejemplo, un módulo compartido) requiere que también exporte el 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 { } 

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

Para mi caso, he estado usando múltiples 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, por defecto 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 cualquiera.

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 me funcionó con Angular 4. En cambio, tuve que usar otra forma de enlace de atributos con el attrprefijo:

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

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 a AppModule. De la documentación angular:

Los módulos no heredan el acceso a los componentes, directivas o tuberías 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

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 use 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 he agregado en AppModule y que debería heredar de él? Pero no lo es. porque estos módulos están exportando directivas requeridas que están disponibles solo en la importación de módulos. Lea más aquí ... https://angular.io/guide/sharing-ngmodules .

Otros factores para estos errores pueden ser errores ortográficos como a continuación ...

[FormGroup] = "form" Capital F en lugar de f pequeña

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

Tuve el mismo problema con Angular 7. Solo importa lo siguiente en tu 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 se produce debido a la falta de importación de FormsModule, ReactiveFormsModule. También tuve el mismo problema. Mi caso fue diff. 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 estaba funcionando.

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]
    })

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

Me encontré con este error al intentar hacer pruebas 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';

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 un problema con mi cargador html.

He configurado 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 en minimizar.

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

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

utilizando e importa 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 cuando desarrolla un componente, debe agregar estos dos módulos al 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();
  });
});

Importe ReactiveFormsModule en el módulo correspondiente

Solución simple :

Paso 1: importar ReactiveFormModule

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

paso 2: agrega "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 en los archivos .ts y .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>

Estaba por error escribió [FormGroup] insted de [formGroup]. Revisa tu ortografía correctamente en .html. No arroja error de tiempo de compilación Si algo anda mal en el archivo .html.

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

No seas tonto como yo. Estaba obteniendo el mismo error que el anterior, NINGUNA de las opciones en este hilo funcionó. Luego me di cuenta de que capitalizaba '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 solo tenga que reiniciar su IDE

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

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 él 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 del camino) y, a veces, solo causa un error tipográfico como:

[formsGroup], con sdespuésform

Mi solución fue sutil y no la vi listada.

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 arrojó este error cada vez que abrí el diálogo.

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

En primer lugar, no está relacionado con las versiones angulares> 2 . Solo importa lo siguiente en tu 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

Una vez que agregué mi módulo, AppModuletodo comenzó a funcionar bien.