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

Não consigo fazer binding com o formGroup

Ola pessoal! Estou tentando criar um formulário de alteração de nomes, dados pessoas do funcionário, pego as informações do funcionário vindos do banco sendo que ai tento colocar elas nos seus campos, sendo que nao consigo passa elas. Alguém pode me ajuda.Sou novo no angular.

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { ActivatedRoute, Router } from "@angular/router";
import { FormGroup, FormBuilder, Validators } from "@angular/forms";

import { FuncionarioNewDTO } from "src/app/model/funcionarionewdto";
import { FuncionarioService } from "src/app/service/funcionario.service";


@Component({
    selector: 'ap-funcionario-detalhes',
    templateUrl:'./funcionario-detalhes.component.html'
})
export class FuncionarioDetalhesComponent implements OnInit{

    alteraForm: FormGroup;
    //funcionarios$: Observable<FuncionarioNewDTO>;
    funcionarios: FuncionarioNewDTO;
    funcionarioId: number;



    constructor(
        private formBuilder: FormBuilder,
        private funcionarioService:FuncionarioService,
        private route: ActivatedRoute,
        private router: Router){}

    ngOnInit(): void {
       this.funcionarioId = this.route.snapshot.params.funcionarioId;
       this.funcionarioService.buscaPorId(this.funcionarioId)
            .subscribe(funcionario => this.funcionarios = funcionario);   

            this.alteraForm = this.formBuilder.group({
              nome: [this.funcionarios.nome, 
                  [

                    Validators.minLength(5),
                    Validators.maxLength(70)
                  ]
              ],
              email:[this.funcionarios.email, 
                   [
                      Validators.required,
                      Validators.maxLength(80),
                      Validators.email
                   ]

             ],     
              dataNascimento:[this.funcionarios.dataNascimento],
              cargo:['',
                    [
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(30)
                    ]
              ],
              senha:[this.funcionarios.senha,
                    [
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(30)
                    ]
             ],
              tipo:[this.funcionarios.tipo],

              rua:[this.funcionarios.rua,
                 [
                   Validators.required,
                   Validators.minLength(5),
                   Validators.maxLength(30)
                  ]
              ],
              numero:[this.funcionarios.numero, 
                    [
                       Validators.required,
                       Validators.minLength(2),
                       Validators.maxLength(9)
                    ]
              ],
              complemento:[this.funcionarios.complemento, Validators.maxLength(30)],
              bairro:[this.funcionarios.bairro, 
                    [
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(30)
                    ]
              ],
              cep:[this.funcionarios.cep, 
                 [
                   Validators.required,
                   Validators.maxLength(9)
                 ]
              ],
              telefone1:[this.funcionarios.telefone1,
                       [
                          Validators.required,
                          Validators.maxLength(9)
                       ]
              ],
              telefone2:[this.funcionarios.telefone2, Validators.maxLength(9)]
            });
    }

    update(){
        const funcionario = this.alteraForm.getRawValue() as FuncionarioNewDTO;
        this.funcionarioService.update(this.funcionarioId, funcionario)
            .subscribe(()=> {
                this.router.navigate(['/lista','funcionario']);
                err=> {
                    console.log(err);
                }
            });
    }

3 respostas
solução!

Fala aí Maycon, tudo bem? O problema está por causa do fluxo do seu componente, quando você faz:

this.funcionarioService.buscaPorId(this.funcionarioId)
    .subscribe(funcionario => this.funcionarios = funcionario); 

Isso é um trecho de código assíncrono, logo, ele não será executado na hora, existe todo um tempo para fazer a requisição, pegar a resposta e atualizar o atributo na classe.

Porém, começa fazer a requisição de forma paralela e segue o fluxo do código:

this.alteraForm = this.formBuilder.group({
              nome: [this.funcionarios.nome, 
                  [

                    Validators.minLength(5),
                    Validators.maxLength(70)
                  ]
              ],
              email:[this.funcionarios.email, 
                   [
                      Validators.required,
                      Validators.maxLength(80),
                      Validators.email
                   ]

             ],     
              dataNascimento:[this.funcionarios.dataNascimento],
              cargo:['',
                    [
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(30)
                    ]
              ],
              senha:[this.funcionarios.senha,
                    [
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(30)
                    ]
             ],
              tipo:[this.funcionarios.tipo],

              rua:[this.funcionarios.rua,
                 [
                   Validators.required,
                   Validators.minLength(5),
                   Validators.maxLength(30)
                  ]
              ],
              numero:[this.funcionarios.numero, 
                    [
                       Validators.required,
                       Validators.minLength(2),
                       Validators.maxLength(9)
                    ]
              ],
              complemento:[this.funcionarios.complemento, Validators.maxLength(30)],
              bairro:[this.funcionarios.bairro, 
                    [
                      Validators.required,
                      Validators.minLength(5),
                      Validators.maxLength(30)
                    ]
              ],
              cep:[this.funcionarios.cep, 
                 [
                   Validators.required,
                   Validators.maxLength(9)
                 ]
              ],
              telefone1:[this.funcionarios.telefone1,
                       [
                          Validators.required,
                          Validators.maxLength(9)
                       ]
              ],
              telefone2:[this.funcionarios.telefone2, Validators.maxLength(9)]
            });

Nesse momento, a requisição ainda pode estar sendo feita e seu this.funcionarios ainda não terá valor.

Para resolver o problema, tente colocar todo o trecho de criar o formulário dentro do .subscribe.

Dessa maneira, será necessário fazer uma renderização condicional do form, ele só deve ser renderizado quando tivermos criado o FormGroup:

<form *ngIf="alteraForm" [formGroup]="alteraForm">
...
</form>

Ou, você pode criar uma função para criar o form e ela recebera como parâmetro os valores:

createForm(values: any = {}) {
    this.form = this.builder.group({
      name: [values.name, Validators.required],
      age: [values.age, Validators.required]
    });
}

Dai no seu ngOnInit você chama ela e quando fazer o .subscribe também:

ngOnInit() {
    this.service.getPerson().subscribe((resp: any) => this.createForm(resp.result));
    this.createForm();
}

Espero ter ajudado.

Poxa ajudou muito!!! Muito obrigado!

Magina, sempre que precisar não deixe de criar suas dúvida.

Abraços e bons estudos.