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

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'

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?

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 .

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

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.

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

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

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

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

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

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

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

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.

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

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.

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

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

Importar ReactiveFormsModule no módulo correspondente

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

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.

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

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"

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

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

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.

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

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

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

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