Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Erro: formGroup expects a FormGroup instance

Tá tudo funcionando certinho mas essa mensagem de erro não sai do console.

main.ts:11 ERROR Error: NG01052: formGroup expects a FormGroup instance. Please pass one in.

      Example:


  <div [formGroup]="myGroup">
    <input formControlName="firstName">
  </div>

  In your class:

  this.myGroup = new FormGroup({
      firstName: new FormControl()
  });
    at missingFormException (forms.mjs:1509:12)
    at FormGroupDirective._checkFormPresent (forms.mjs:5029:19)
    at FormGroupDirective.ngOnChanges (forms.mjs:4799:14)
    at FormGroupDirective.rememberChangeHistoryAndInvokeOnChangesHook (core.mjs:1526:14)
    at callHook (core.mjs:2508:18)
    at callHooks (core.mjs:2467:17)
    at executeInitAndCheckHooks (core.mjs:2418:9)
    at selectIndexInternal (core.mjs:9826:17)
    at Module.ɵɵadvance (core.mjs:9809:5)
    at EditarPensamentosComponent_Template (editar-pensamentos.component.html:24:38)

Meu código:

editar-pensamentos.component.ts

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { PensamentoService } from './../pensamento.service';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-editar-pensamentos',
  templateUrl: './editar-pensamentos.component.html',
  styleUrls: ['./editar-pensamentos.component.scss']
})
export class EditarPensamentosComponent implements OnInit {


  formulario!: FormGroup;

  constructor(
    private service: PensamentoService,
    private router: Router,
    private route: ActivatedRoute,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id')
    this.service.buscarPorId(parseInt(id!)).subscribe((pensamento) => {
      this.formulario = this.formBuilder.group({
        id: [pensamento.id],
        conteudo: [pensamento.conteudo, Validators.compose([
          Validators.required,
          Validators.pattern(/(.|\s)*\S(.|\s)*/)
        ])],
        autoria: [pensamento.autoria, Validators.compose([
          Validators.required,
          Validators.minLength(3)
        ])],
        modelo: [pensamento.modelo]
      })
    })
  }

  editarPensamento() {
    this.service.editar(this.formulario.value).subscribe(() => {
      this.router.navigate(['/listarPensamento'])
    })
  }

  cancelar() {
    this.router.navigate(['/listarPensamento'])
  }

  habilitarBotao(): string {
    if(this.formulario.valid) {
      return 'botao'
    }else {
      return 'botao__desabilitado'
    }
  }

}
3 respostas

Olá Luiz, tudo bem?

Verifiquei seu código e não encontrei erros. Você incluiu a diretiva formGroup na tag form no html, assim?

<form [formGroup]="formulario">

Se não foi isso, me envia o html do componente editar, para eu dar uma olhada, ok?

solução!

Luiz, fiz uns testes aqui e vi que o problema pode estar acontecendo porque o formulário só é inicializado quando o service obtém o retorno do observable, depois que já houve a renderização do HTML.

Para corrigir, você pode inserir uma checagem na tag form, assim:

<form [formGroup]="formulario" *ngIf="formulario">

Acredito que assim, o erro desaparecerá.

Abraços, bons estudos!

Perfeito Nayanne, coloquei o ngIf e deu certo, o erro sumiu! Muito obrigado! :D