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

La situación

Estoy intentando crear lo que debería ser un formulario muy simple en mi aplicación Angular, pero pase lo que pase, nunca funciona.

La versión angular

Angular 2.0.0 RC5

El error

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

Ingrese la descripción de la imagen aquí

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 módulo ng

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?

Aug 26 '16 01:08 FrancescoMussi

RC6/RC7/Revisión final

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 con más detalle, formGrouphay un selector para directiva llamado FormGroupDirectiveque forma parte de 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 .

RC5 ARREGLO

Debe import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'ingresar su controlador y agregarlo directivesen @Component. Eso solucionará el problema.

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

Aug 25 '2016 18:08 Stefan Svrkota

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

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

May 02 '2017 11:05 Undrium

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 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 funcionó cuando utilicé 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, todos sus módulos secundarios heredarían ReactiveFormsModule, como autor.module en este caso... (¡incorrecto!). Necesitaba importar ReactiveFormsModule en Author.module.ts para que todas las directivas funcionaran:

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

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

export class AuthorModule {}

Entonces, si está utilizando submódulos, asegúrese de importar ReactiveFormsModule en cada archivo de submódulo.

Aug 16 '2017 13:08 Ashutosh Jha