2
respostas

[Dúvida] Dificuldade em carregar Pensamento no modo de edição

olá,

No curso anterior, ao invés de eu fazer dois componentes, eu fiz um só, de formulário, para criar e editar. Agora, seguindo o desafio da professora, eu tentei manter ainda um unico componente, de formulário. Meu código ficou assim (eu to fazendo o código em inglês):

export class ThoughtFormComponent implements OnInit {
  thought: Thought = {
    id: '',
    content: '',
    author: '',
    model: 'modelo1',
  };

  form!: FormGroup;

  constructor(
    private thoughtService: ThoughtsService,
    private router: Router,
    private route: ActivatedRoute,
    private formBuilder: FormBuilder
  ) {}

  ngOnInit(): void {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.thoughtService.getThoughtById(id).subscribe((thought: Thought) => {
        this.thought = thought;
        this.createForm();
      });
    } else {
      this.createForm();
    }
  }

  private createForm() {
    this.form = this.formBuilder.group({
      content: [
        this.thought.content,
        Validators.compose([
          Validators.required,
          Validators.pattern(/(.|\s)*\S(.|\s)*/),
        ]),
      ],
      author: [
        this.thought.author,
        Validators.compose([Validators.required, Validators.minLength(2)]),
      ],
      model: [this.thought.model],
    });
  }
//...
}

E meu template está assim:

<!-- .... -->
  <form [formGroup]="form">
    <label for="content">Pensamento</label>
    <input
      class="input"
      type="textarea"
      formControlName="content"
      id="content"
      placeholder="Digite o pensamento"
    />
    <div
      class="mensagem__erro"
      *ngIf="form.get('content')?.errors && form.get('content')?.touched"
    >
      Pensamento é obrigatório
    </div>

    <label for="author">Autoria</label>
    <input
      class="input"
      type="textarea"
      formControlName="author"
      id="author"
      placeholder="Autoria ou Fonte"
    />
    <div
      class="mensagem__erro"
      *ngIf="form.get('author')?.errors?.['required'] && form.get('author')?.touched"
    >
      Autoria é obrigatória
    </div>
    <div
      class="mensagem__erro"
      *ngIf="form.get('author')?.errors?.['minLength'] && form.get('author')?.touched"
    >
      Autoria precisa de no mínimo 2 caracteres
    </div>
<!--- .... -->
</form>

Se a gente olhar o código em modo debug, vê que os valores são recebidos: Insira aqui a descrição dessa imagem para ajudar na acessibilidadePorém, não está sendo carregado no form. Mas apenas content, author e model carregam normalmente. Alguém tem uma pista do motivo? Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Link do GitHub do meu projeto: https://github.com/Fernandomn/memoteca

2 respostas

E aí, Fernando! Blz?

Aí, pelo que entendi, você tá enfrentando um problema de carregar os dados no formulário para edição, certo? Bora tentar entender o que tá rolando.

Dá uma conferida no objeto thought que você está recebendo do serviço thoughtService.getThoughtById(id). Confirma se ele realmente tem todos os campos que você espera (content, author e model).

Você tá chamando o createForm() dentro do subscribe, o que é bom. Mas, às vezes, pode ser que a chamada esteja ocorrendo antes do thought ser completamente carregado. Tente fazer um console.log(this.thought) logo após this.thought = thought; pra ver se tá tudo certinho.

Quando você tá usando Reactive Forms no Angular, mudanças no objeto que inicializa o FormGroup não são refletidas automaticamente. Então, depois de carregar os dados, tente resetar o FormGroup com os novos valores. Algo assim:

this.form.reset({
  content: this.thought.content,
  author: this.thought.author,
  model: this.thought.model
});

Você mencionou que apenas content, author e model estão sendo carregados. Se você tiver algum erro de digitação ou algo do tipo nos nomes dos campos, isso pode causar esse tipo de problema. Garanta que os nomes dos campos no objeto thought correspondam exatamente aos nomes nos formControlName no template.

No seu template, você está usando o formControlName corretamente para os campos. Só confirma se não há nenhum erro de digitação ou diferença de nomenclatura entre o que você espera e o que está no template.

Por fim, o Angular tem suas manias e, às vezes, a solução pode ser mais simples do que parece. Vale a pena dar uma revisada nesses pontos e ver se algum deles resolve o seu problema.

boa. implementei o reset. Também ,uma coisa que ajudou foi fazer um

  <form [formGroup]="form" *ngIf="form">
<!-- .... -->

no thought-form.component.html

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software