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

validar formulario angular 5

Question

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?

Answer 1

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

Answer 2

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 ReactiveFormsModule en el archivo .spec.ts :

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

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

Answer 3

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

Answer 4

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.

Answer 5

La respuesta sugerida no funcionó para mí con Angular 4. En cambio, tuve que usar otra forma de enlace de atributos con el prefijo attr :

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

Answer 6

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'';

Answer 7

No seas tan 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!

[FormGroup]="form"

Answer 8

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 ... (¡mal!). 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.

Answer 9

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.

Answer 10

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();
  });
});

Answer 11

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

Answer 12

Tenga en cuenta que si ha definido "Módulos de funciones", deberá importar en el Módulo de AppModule , incluso si ya 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

Answer 13

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
],

Answer 14

Una vez que agregué mi módulo al AppModule todo comenzó a funcionar bien.

Answer 15

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

Answer 16

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 de lo que sabe para ese elemento (en este caso).

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 s después del form

Answer 17

RC5 FIX

import { REACTIVE_FORM_DIRECTIVES } from ''@angular/forms'' en su controlador y agregarlo a las directives en @Component . Eso solucionará el problema.

Después de corregirlo, 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 ReactiveFormsModule desde @angular/forms en su módulo. Este es el ejemplo de un módulo básico con importación ReactiveFormsModule :

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, formGroup es un selector para la directiva llamada FormGroupDirective que es parte de ReactiveFormsModule , de ahí la necesidad de importarlo. Se utiliza para vincular un FormGroup existente a un elemento DOM. Puede leer más al respecto en la página de documentos oficiales de Angular .

Answer 18

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.

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 e innumerables importaciones de ReactiveFormsModule, vi que mi formGroup era letras pequeñas: 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.