1
resposta

[Dúvida] Unidades federativas parecem estar retornando um loop

Olá! Estou tentando fazer o cadastro da pessoa qnd ele passa pelo dropdown de selecionar a unidade federativa e o meu console retorna o seguinte erro:

TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'OperatorSubscriber'
    |     property '_parentage' -> object with constructor 'SafeSubscriber'
    |     property '_finalizers' -> object with constructor 'Array'
    --- index 0 closes the circle
    at JSON.stringify (<anonymous>)
    at HttpRequest.serializeBody (http.mjs:832:25)
    at Observable._subscribe (http.mjs:2016:37)
    at Observable._trySubscribe (Observable.js:37:25)
    at Observable.js:31:30
    at errorContext (errorContext.js:19:9)
    at Observable.subscribe (Observable.js:22:21)
    at source.subscribe.isComplete (switchMap.js:14:51)
    at OperatorSubscriber._next (OperatorSubscriber.js:13:21)
    at OperatorSubscriber.next (Subscriber.js:31:18)

Pesquisando eu pude entender q para mim, da um erro no retorno porque ele está retornando um novo formulário em cima de um formulário Fui até o form-base.component.ts e há a seguinte linha

  estadoControl = new FormControl<IEstados | null>(null, Validators.required);

e então o meuformulário

ngOnInit(): void {
    this.cadastroForm = this.fb.group({
      nome: ["Ariel", Validators.required],
      nascimento: [null, Validators.required],
      cpf: ["01234567891", Validators.required],
      cidade: ["Chapolim", Validators.required],
      email: ["chapolim@email", [Validators.required, Validators.email]],
      senha: ["1234", [Validators.required, Validators.minLength(3)]],
      genero: ['outro'],
      telefone: ["123456789", Validators.required],
      estado: [this.estadoControl],
      confirmarEmail: ["chapolim@email", [Validators.required, Validators.email]],
      confirmarSenha: ["1234", [Validators.required, Validators.minLength(3)]],
      aceitarTermos: [true, Validators.requiredTrue],
    });


    this.formularioService.setCadastro(this.cadastroForm)
  }

e ao mandar imprimir o que o formulário poderia estar apresentando, ele retorna:

aceitarTermos
: 
true
cidade
: 
"Brasília"
confirmarEmail
: 
"email@email"
confirmarSenha
: 
"12345"
cpf
: 
"01234567890"
email
: 
"email@email"
estado
: 
FormControl {_pendingDirty: true, _hasOwnPendingAsyncValidator: false, _pendingTouched: true, _parent: null, _onCollectionChange: ƒ, …}
genero
: 
"masculino"
nascimento
: 
Sun Oct 01 2023 00:00:00 GMT-0300 (Horário Padrão de Brasília) {}
nome
: 
"ariel"
senha
: 
"12345"
telefone
: 
"5561999999999"

Acredito eu que está mostrando esse loop por estar declarando um formulário dentro do formulário, mas vi o código da instrutora no github e o form-base dela está equiparado ao meu

Como posso dar a volta por problema? Obrigado!

edit #######################################

é o famoso "só ve o erro dps que posta", desculpa pessoal, mas encontrei meu erro dentro do formulário eu passei:

estado: [this.estadoControl],

e na verdade deve ser sem os colchetes, ficando apenas

estado: this.estadoControl,
1 resposta

Oi, Ariel! Tudo joia?

Fico feliz que você conseguiu encontrar a solução para o problema! É isso mesmo. Ao criar o grupo de formulários com o FormBuilder, você deve passar diretamente a instância do FormControl, sem a necessidade de encapsulá-la em um array. Isso ocorre porque o FormBuilder espera receber um array apenas quando você deseja aplicar múltiplos validadores a um mesmo campo, como no caso do campo 'email' e 'senha'. Então, quando você encapsulou this.estadoControl dentro de um array, o Angular tentou interpretar isso como uma lista de validadores, o que causou o erro.

Parabéns pela sua dedicação em resolver o problema e por compartilhar a solução com a comunidade! Isso com certeza pode ajudar outras pessoas que possam ter a mesma dúvida.

Se tiver alguma dúvida, me coloco à disposição!

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!