Não é possível vincular a 'formGroup', pois não é uma propriedade conhecida de 'form'

806

A SITUAÇÃO:

Por favor ajude! Estou tentando criar o que deve ser uma forma muito simples no meu aplicativo Angular2, mas não importa o que nunca funcione.

VERSÃO ANGULAR:

Angular 2.0.0 Rc5

O ERRO:

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

insira a descrição da imagem aqui

O CÓDIGO:

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

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

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

A QUESTÃO:

Por que estou recebendo esse erro?

Estou esquecendo de algo?

FrancescoMussi
fonte

Respostas:

1412

RC5 FIX

Você precisa import { REACTIVE_FORM_DIRECTIVES } from '@angular/forms'em seu controlador e adicioná-lo directivesem @Component. Isso resolverá o problema.

Depois de corrigir isso, você provavelmente receberá outro erro porque não adicionou formControlName="name"sua entrada no formulário.

RC6 / RC7 / FIX de lançamento final

Para corrigir esse erro, você só precisa importar ReactiveFormsModuledo @angular/formsseu módulo. Aqui está o exemplo de um módulo básico com ReactiveFormsModuleimportação:

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 mais, formGroupé um seletor de diretiva nomeado FormGroupDirectiveque faz parte ReactiveFormsModule, daí a necessidade de importá-lo. É usado para ligar um existente FormGroupa um elemento DOM. Você pode ler mais sobre isso na página de documentos oficiais da Angular .

Stefan Svrkota
fonte
13
O que não entendo é por que é necessário adicionar REACTIVE_FORM_DIRECTIVES se o FormsModule estiver sendo importado dentro do app.module. O objetivo principal dos módulos é evitar a necessidade de declarar diretivas dentro dos componentes.
Daniel Pliscki 01/09/16
19
@DanielPliscki Você está completamente certo, eu acabei de descobrir que eles corrigiram esse problema na versão RC6 que foi lançada hoje. Agora você não precisa fazer isso, apenas importa FormsModulee ReactiveFormsModule. Vou editar minha resposta.
Stefan Svrkota 01/09/16
12
PERDEI UMA HORA concluindo o esquecimento de que criei um módulo separado para o meu formulário de login para carregar lentamente os módulos entre os estados. (Eu sou novo no A2, ainda prefiro A1) Certifique-se de usar o módulo certo! Não seja um idiota como eu. Você também não precisa mais adicionar ao componente. As importações no seu módulo são suficientes. Graças
user1889992
4
Obrigado, trabalhou para mim. Estou confuso por que isso não é mencionado nos guias para FormControls em angular 2 que eu tropecei em cima ..
cjohansson
1
No Angular 4 eu adicionei ReactiveFormsModulena lista de provedores e funcionou. Não tenho certeza se é assim que você deve fazê-lo.
BrunoLM 18/07
151

O Angular 4 em combinação com os módulos de recursos (se você estiver usando, por exemplo, um módulo compartilhado) exige que você também exporte o ReactiveFormsModulepara o trabalho.

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 { } 
Undrium
fonte
122

Ok, depois de algumas escavações, encontrei uma solução para "Não é possível vincular ao 'formGroup', pois não é uma propriedade conhecida de 'form'."

No meu caso, eu tenho usado vários arquivos de módulos, adicionei ReactiveFormsModule em app.module.ts

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

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

Mas isso não estava funcionando quando eu uso uma diretiva [formGroup] de um componente adicionado em outro módulo, por exemplo, usando [formGroup] no author.component.ts, inscrito no arquivo 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 {}

Eu pensei que se eu adicionasse ReactiveFormsModule em app.module.ts, por padrão ReactiveFormsModule seria herdado por todos os seus módulos filhos como author.module neste caso ... (errado!). Eu precisava importar ReactiveFormsModule em author.module.ts para fazer com que todas as diretivas funcionassem:

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

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

export class AuthorModule {}

Portanto, se você estiver usando submódulos, importe ReactiveFormsModule em cada arquivo de submódulo. Espero que isso ajude alguém.

Ashutosh Jha
fonte
1
Funciona para mim, exatamente o mesmo problema, eu realmente pensei que os módulos no array de exportações serão herdados pelos módulos filhos ... Não sei exatamente por que! EDIT: documentação diz exportações é fazer com que componentes, tubos, directivas disponíveis no modelo de qualquer componente ()
guy777
52

Eu encontrei esse erro durante o teste de unidade de um componente (somente durante o teste, no aplicativo funcionava normalmente). A solução é importar ReactiveFormsModuleno .spec.tsarquivo:

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

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

A resposta sugerida não funcionou para mim no Angular 4. Em vez disso, tive que usar outra maneira de vincular atributos com o attrprefixo:

<element [attr.attribute-to-bind]="someValue">
str
fonte
3
E aí cara! Tem certeza de que sua resposta está relacionada à pergunta? :) A pergunta era sobre um cenário questão um formulário - causa por não corretamente configurar o ngModule
FrancescoMussi
1
@johnnyfittizio Pretty sure. Mesmo cenário, mesma mensagem de erro.
str
2
Isso funcionou para mim, mas é estranho - por que eu preciso do attr.?
CodyBugstein 26/10
Muito obrigado. Isso funcionou para mim também, mas acho que deve haver algo mais desencadeando o problema, como controle de versão de biblioteca ou posicionamento de tag <form>? Estranho.
Memetican 14/03/19
Encontrei, o problema era que eu precisava importar ReactiveFormsModulediretamente para a minha página .module.ts. Não .page.ts... quando fiz isso, meu modelo conseguiu identificar corretamente o formGroupatributo, sem o attr.prefixo.
Memetican 15/03/19
19

Se você precisar importar dois módulos, adicione assim abaixo

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]
})
sudheer nunna
fonte
14

Lembre-se de que se você definiu "Módulos de recursos", precisará importar no Módulo de recursos, mesmo se já tiver importado para o AppModule. Na documentação Angular:

Os módulos não herdam o acesso aos componentes, diretivas ou canais declarados em outros módulos. O que o AppModule importa é irrelevante para o ContactModule e vice-versa. Antes que o ContactComponent possa se conectar com [(ngModel)], o ContactModule deve importar o FormsModule.

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

Ian Griffin
fonte
14

O erro diz que o FormGroup não é reconhecido neste módulo. Então, você precisa importar esses módulos (abaixo) em todos os módulos que usam o FormGroup

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

Em seguida, adicione FormsModule e ReactiveFormsModule na matriz de importações do módulo .

imports: [
  FormsModule,
  ReactiveFormsModule
],

Você pode estar pensando que eu já o adicionei no AppModule e ele deve herdar dele? Mas não é. porque esses módulos estão exportando diretivas necessárias que estão disponíveis apenas na importação de módulos. Leia mais aqui ... https://angular.io/guide/sharing-ngmodules .

Outros fatores para esses erros podem ser erros de ortografia, como abaixo ...

[FormGroup] = "form" Capital F em vez de pequeno f

[formsGroup] = "form" Extra s após o formulário

Abhishek Singh
fonte
13

Eu tive o mesmo problema com o Angular 7. Basta importar o seguinte no seu arquivo app.module.ts.

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

Em seguida, adicione FormsModule e ReactiveFormsModule à sua matriz de importações.

imports: [
  FormsModule,
  ReactiveFormsModule
],
Chamila Maddumage
fonte
1
Isso não funciona para mim no Angulat 7.
RaffAl
9

Esse problema ocorre devido à falta de importação de FormsModule, ReactiveFormsModule. Também vii com o mesmo problema. Meu caso foi diferente. Como eu estava trabalhando com modules.So eu perdi as importações acima em meus módulos pai, embora eu tivesse importado para módulos filho, ele não estava funcionando.

Então eu importei-o para os meus módulos pai, como abaixo, e funcionou!

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

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

Para pessoas passeando por esses tópicos sobre esse erro. No meu caso, eu tinha um módulo compartilhado onde exportava apenas o FormsModule e o ReactiveFormsModule e esqueci de importá-lo. Isso causou um erro estranho de que os grupos de formulários não estavam funcionando nos subcomponentes. Espero que isso ajude as pessoas a coçar a cabeça.

GKooij
fonte
7

Eu estava encontrando esse erro ao tentar fazer o teste e2e e estava me deixando louco por não haver respostas para isso.

Se você estiver testando , localize seu arquivo * .specs.ts e adicione:

import {ReactiveFormsModule, FormsModule} from '@angular/forms';
Mr Giggles
fonte
5

UMA PEQUENA NOTA: Tenha cuidado com as carregadeiras e minimize (Rails env.):

Depois de ver esse erro e tentar todas as soluções existentes, percebi que havia algo errado com meu carregador de html.

Configurei meu ambiente Rails para importar caminhos HTML para meus componentes com sucesso com este loader ( config/loaders/html.js.):

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

Depois de algumas horas esforços e incontável de importações ReactiveFormsModule eu vi que o meu formGroupfoi pequenas letras: formgroup.

Isso me levou ao carregador e ao fato de que ele reduziu meu HTML a minimizar.

Depois de alterar as opções, tudo funcionou como deveria, e eu poderia voltar a chorar novamente.

Sei que essa não é uma resposta para a pergunta, mas para futuros visitantes do Rails (e outros com carregadores personalizados) acho que isso pode ser útil.

Peter Højlund Andersen
fonte
5

usando e importando 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 { }
mojtaba ramezani
fonte
5

Se você tiver esse problema ao desenvolver um componente, adicione esses dois módulos ao módulo mais próximo:

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

E se você estiver desenvolvendo um teste para seus componentes, adicione este módulo ao seu arquivo de teste desta forma:

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

Importar ReactiveFormsModule no módulo correspondente

Meghnath Das
fonte
5

Solução simples:

etapa 1: importar ReactiveFormModule

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

etapa 2: adicione "ReactiveFormsModule" à seção de importação

imports: [

    ReactiveFormsModule
  ]

Etapa 3: reiniciar o aplicativo e pronto

Exemplo:

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 { }
Shashwat Gupta
fonte
4

Importe e registre ReactiveFormsModule em seu app.module.ts.

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

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

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

Verifique se a ortografia está correta nos arquivos .ts e .html. xxx.ts

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

arquivo 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 engano, escrevi [FormGroup] no lugar de [formGroup]. Verifique a ortografia corretamente em .html. Não gera erro de tempo de compilação Se algo estiver errado no arquivo .html.

DIBYA RANJAN TRIPATHY
fonte
1
Eu cometi o mesmo erro!! Muito obrigado. em html eu tinha [FormGroup] não [formGroup]
tony2tones
Obrigado pelo feedback.
DIBYA RANJAN TRIPATHY
4

Nota : se você estiver trabalhando dentro do componente do módulo filho, precisará importar ReactiveFormsModule no módulo filho, em vez do módulo raiz do aplicativo pai

M Abdullah
fonte
4

Não seja burro como eu. Estava recebendo o mesmo erro acima, NENHUMA das opções deste segmento funcionou. Então percebi que estava em maiúscula 'F' no FormGroup. Doh!

Ao invés de:

[FormGroup]="form"

Faz:

[formGroup]="form"

folheto
fonte
1
mesmo problema aqui
greg
3

se este for apenas um erro de digitação, mas tudo no seu formulário funcionar, talvez seja necessário reiniciar o IDE

Avi E. Koenig
fonte
3

Eu tive o mesmo problema, verifique se, ao usar submódulos (por exemplo, você não apenas possui app.component.module.ts, mas também um componente separado, como login.module.ts, inclui a importação ReactiveFormsModule nesse logon .module.ts import, para que funcione.Eu nem preciso importar ReactiveFormsModule no meu app.component.module porque estou usando submódulos para tudo.

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 {}
Peter Edwards
fonte
3

Pode ajudar alguém:

quando você tem um formGroup em um modal (entrycomponent), é necessário importar ReactiveFormsModule também no módulo em que o modal é instanciado.

tonertop
fonte
2

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

significa que você tenta vincular uma propriedade usando angular ( [prop]), mas angular não pode encontrar nada que ele saiba sobre esse elemento (nesse caso form).

isso pode acontecer não usando o módulo correto (faltando uma importação em algum lugar do caminho) e às vezes apenas causando um erro de digitação como:

[formsGroup], com sdepoisform

bresleveloper
fonte
0

Minha solução foi sutil e ainda não a vi listada.

Eu estava usando formas reativas em um componente da caixa de diálogo Angular Materials que não foi declarado app.module.ts. O componente principal foi declarado em app.module.tse abriria o componente de diálogo, mas o componente de diálogo não foi declarado explicitamente em app.module.ts.

Não tive problemas ao usar o componente de diálogo normalmente, exceto que o formulário gerava esse erro sempre que eu abria o diálogo.

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

NDavis
fonte
0

Em primeiro lugar, não está relacionado às versões angulares> 2 . Basta importar o seguinte no arquivo app.module.ts para corrigir os problemas.

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

Em seguida, adicione FormsModule e ReactiveFormsModule à sua matriz de importações.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Nota : Você também pode importar ReactiveFormsModulepara um módulo específico em vez deapp.module.ts

Nanda Kishore Allu
fonte
-2

Depois que adicionei meu módulo ao AppModuletudo, tudo começou a funcionar bem.

Leandro
fonte