Angular: Cannot link 'formGroup' as it is not a known form property

Asked

Viewed 94 times

1

I’m making a small app, which takes a message typed in the form and records it on the console. I tried to import several items and found similar problems to mine on the internet but they did not help me. I am getting this error:

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.componentts.:

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);
  }
}
angular typescript

  • There is nothing wrong, at least in the Angular part, it may be that the problem is a tag <form> within a tag <a>, other than that there is no problem in the code!

  • I took the <a> tag, but it’s still a problem. ):

  • Strange, because apparently you imported and declared everything correctly, I just think you should (which is standard in development with Angular) separate the module in one file and the class in another, everything in one file only gets bad to keep as the application grows, gets messy. Now as for the problem I can’t see the pq of the error sincerely.

1 answer

-1

I solved your problem using Formbuilder.

I suggest you take a look at his documentation: https://angular.io/api/forms/FormBuilder

I did the app on Stackblitz: https://stackblitz.com/edit/angular-ivy-nve7xj?file=src/app/app.component.ts

I don’t know how long this link will work.

Let’s go for the answer:

Within app.component you must import the following items:

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

Do this implement Oninit in its component.

export class AppComponent implements OnInit {}

Now you should call Formbuilder in your builder, if it’s the app.Component it won’t be there, you’ll have to create it.

constructor(private formBuilder: FormBuilder) {}

Create a formGroup with your group name.

pushForm: any = FormGroup;

So within your ngOnInit you must create your group, using Formbuilder

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

Now in your printing method, enter the values you want to print.

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

Complete code of the changes made to the.Com app:

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

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.