1

Estou fazendo um pequeno aplicativo, que pega uma mensagem digitada no formulário e grava no console. Tentei importar vários itens e encontrei problemas semelhantes ao meu na internet, mas não me ajudaram. Estou recebendo este erro:

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

app.component.html:

<div class="content" role="main">
  <a>
  <form [formGroup]="pushForm"> <!--Show the error here -->
    <label>Titulo:</label>
    <input class="form-control" formControlName="titulo">
    <label>Menssagem:</label>
    <input class="form-control" formControlName="menssagem">
    <button (click)="printConsole();" >Enviar Menssagem</button>
  </form>
  </a>
</div>
<router-outlet></router-outlet>

app.component.ts:

import { Component, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormControl, FormGroup } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
@NgModule({
  imports: [
    BrowserModule,
ReactiveFormsModule
  ],
})

  
export class AppComponent {
  pushForm = new FormGroup ({
    titulo: new FormControl(),
    mensagem: new FormControl(),
  });

  printConsole() {
    console.log("Menssagem: "+ this.pushForm.value);
  }
}
3
  • Não há nada de errado, pelo menos na parte do Angular, pode ser que o problema seja uma tag <form> dentro de uma tag <a>, fora isso não há problema no código!
    – LeAndrade
    Commented 18/02/2021 às 18:36
  • Tirei a tag <a>, mas ainda está dando problema. ): Commented 18/02/2021 às 19:23
  • Estranho, pq aparentemente vc importou e declarou tudo corretamente, só acho que deveria (que é padrão no desenvolvimento com Angular) separar o módulo em um arquivo e a classe em outro, tudo em um arquivo só fica ruim de manter conforme a aplicação vai crescendo, fica bagunçado. Agora quanto ao problema não consigo ver o pq do erro sinceramente.
    – LeAndrade
    Commented 18/02/2021 às 19:41

1 Resposta 1

-1

Resolvi o seu problema usando o FormBuilder.

Sugiro que de uma olhada na documentação dele: https://angular.io/api/forms/FormBuilder

Fiz a aplicação no StackBlitz: https://stackblitz.com/edit/angular-ivy-nve7xj?file=src/app/app.component.ts

Não sei quanto tempo esse link vai funcionar.

Vamos para a resposta:

Dentro de app.component você deve importar os seguintes itens:

import { FormBuilder, FormControl, FormGroup } from "@angular/forms";
import { Component, OnInit } from "@angular/core";

Feito isso implemente o OnInit no seu componente.

export class AppComponent implements OnInit {}

Agora você deve chamar o FormBuilder em seu construtor, se for o app.component ele não vai estar lá, você vai ter que criá-lo.

constructor(private formBuilder: FormBuilder) {}

Crie um formGroup com o nome do seu grupo.

pushForm: any = FormGroup;

Então dentro do seu ngOnInit você deve criar o seu grupo, usando o FormBuilder

this.pushForm = this.formBuilder.group({
  titulo: [null],
  menssagem: [null]
});

Agora no seu método de impressão, insira os valores que você deseja imprimir.

printConsole() {
    console.log(
      "Menssagem: " + this.pushForm.value.titulo,
      this.pushForm.value.menssagem
    );

Código completo das alterações feitas no app.component:

import { Component, OnInit } from "@angular/core";
import { FormBuilder, FormControl, FormGroup } from "@angular/forms";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  constructor(private formBuilder: FormBuilder) {}
  pushForm: any = FormGroup;
  ngOnInit(): void {
    this.pushForm = this.formBuilder.group({
      titulo: [null],
      menssagem: [null]
    });
  }
  printConsole() {
    console.log(
      "Menssagem: " + this.pushForm.value.titulo,
      this.pushForm.value.menssagem
    );
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .