angular - zorro - uncaught in promise): error template parse errors can t bind to formgroup




Não é possível vincular a 'formGroup' porque não é uma propriedade conhecida de 'form' (12)

A resposta sugerida não funcionou para mim com o Angular 4. Em vez disso, tive que usar outra forma de vinculação de atributo com o prefixo attr :

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

A SITUAÇÃO:

Por favor ajude! Eu estou tentando fazer o que deveria ser uma forma muito simples no meu aplicativo Angular2, mas não importa o que nunca funciona.

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?


Angular 4 em combinação com módulos de recursos (se você estiver, por exemplo, usando um módulo compartilhado) requer que você também exporte o ReactiveFormsModule para funcionar.

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

Este problema ocorre devido à falta de importação de FormsModule, ReactiveFormsModule. Eu também veio com o mesmo problema. Meu caso foi diff. como eu estava trabalhando com modules.So eu perdi acima de importações em meus módulos pai que eu tinha importado em módulos filho, não estava funcionando.

Então eu o importei 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]
    })

Eu encontrei este erro durante o teste de unidade de um componente (somente durante o teste, dentro do aplicativo funcionou normalmente). A solução é importar o ReactiveFormsModule no arquivo .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();
    }));
});

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

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

Em seguida, adicione FormsModule e ReactiveFormsModule ao seu array de importações.

imports: [
  FormsModule,
  ReactiveFormsModule
],

Importe e registre o ReactiveFormsModule no 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] insted de [formGroup]. Verifique sua ortografia corretamente em .html. Ele não gera erro de tempo de compilação Se houver algo errado no arquivo .html.


Ok, depois de algumas escavações eu encontrei uma solução para "Não é possível vincular a 'formGroup' desde que não é uma propriedade conhecida de 'formulário'."

Para o meu caso, eu tenho usado vários arquivos de módulos, eu 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 o [formGroup] em author.component.ts que está 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 adicionei 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 o 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, certifique-se de importar o ReactiveFormsModule em cada arquivo do submódulo. Espero que isso ajude alguém.


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


Se você tiver que 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]
})

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

RC5 FIX

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

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

RC6 / RC7 / Lançamento Final FIX

Para corrigir este erro, basta importar o ReactiveFormsModule de @angular/forms no seu módulo. Aqui está o exemplo de um módulo básico com a importação de 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 melhor, o formGroup é um seletor para a diretiva denominada FormGroupDirective que faz parte do ReactiveFormsModule , daí a necessidade de importá-lo. Ele é usado para vincular um FormGroup existente a um elemento DOM. Você pode ler mais sobre isso na página oficial de documentos do Angular .


UMA POUCA NOTA: Tenha cuidado com os carregadores e minimize (Rails env):

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

Eu configurei meu ambiente Rails para importar caminhos HTML para meus componentes com êxito com este carregador ( config/loaders/html.js. ):

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

Depois de alguns esforços de horas e incontáveis ​​importações de ReactiveFormsModule, vi que meu formGroup era letras pequenas: formgroup .

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

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

Eu sei que isso não é uma resposta para a pergunta, mas para os futuros visitantes do Rails (e outros com loaders personalizados) eu acho que isso poderia ser útil.





angular2-forms