Minha Implementação - Angular 18

HTML: Não houve mudanças significativas, apenas nas trativas de erros, centralizando as mensagens de error.

    <input type="textarea" class="input" id="pensamento" name="conteudo" placeholder="Digite o pensamento"
      formControlName="conteudo">

    <div *ngIf="formulario.get('conteudo')?.errors as errors">
      <ng-container *ngIf="formulario.get('conteudo')?.touched">
        <span class="mensagem__erro" *ngIf="errors['required']">CAMPO OBRIGATÓRIO</span>
        <span class="mensagem__erro" *ngIf="errors['minlength']">CAMPO DEVE CONTER NO MINIMO 3 CARACTERES</span>
      </ng-container>
    </div>

No componente de edição, o objetivo é carregar os dados de um "pensamento" existente para que o usuário possa editá-los e depois salvar as alterações.

Carregamento Inicial: Quando o componente é carregado, ele obtém o id do pensamento da URL e faz uma requisição ao serviço para buscar os dados desse pensamento. Os dados obtidos são então preenchidos automaticamente no formulário através do método patchValue(), preenchendo os campos de conteudo, autoria, modelo e id.

Edição: Quando o usuário clica no botão para salvar as alterações, os dados do formulário são extraídos. Se algum campo não foi preenchido, valores padrão são atribuídos (por exemplo, "" ou null) para evitar enviar dados inválidos. O objeto atualizado (pensamentoAtualizado) é então enviado ao servidor usando o serviço editar. Validação: O formulário tem validações para garantir que os campos conteudo, autoria e modelo não sejam vazios e que conteudo e autoria tenham pelo menos 3 caracteres.

O botão de envio é habilitado ou desabilitado dependendo da validade do formulário. Se o formulário for inválido, o botão é desabilitado.

import { Component } from '@angular/core';
import { thought } from '../../thought';
import { ThoughtService } from '../../components/thoughts/thought.service';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
import { CommonModule } from '@angular/common';
@Component({
  selector: 'app-editar-thoughts',
  imports: [FormsModule, ReactiveFormsModule, CommonModule, ReactiveFormsModule],
  templateUrl: './editar-thoughts.component.html',
  styleUrl: './editar-thoughts.component.css'
})
export class EditarThoughtsComponent {
  formulario = new FormGroup({
    id: new FormControl('',),
    conteudo: new FormControl('', [Validators.required, Validators.minLength(3)]),
    autoria: new FormControl('', [Validators.required, Validators.minLength(3)]),
    modelo: new FormControl('', Validators.required, )
  })
  pensamento: thought = {
    id: "",
    conteudo: "",
    autoria: "",
    modelo: ""
  }
  constructor(
    private service: ThoughtService,
    private router: Router,
    private ActiveRoute: ActivatedRoute
  ){}
  ngOnInit(){
    const id = this.ActiveRoute.snapshot.paramMap.get('id')
    this.service.buscarId(id!).subscribe((pensamento) => {
      this.pensamento = pensamento
      this.formulario.patchValue({
        id: this.pensamento.id,
        conteudo: this.pensamento.conteudo,
        autoria: this.pensamento.autoria,
        modelo: this.pensamento.modelo
      })
    })
  }
  editarPensamento(){
    const pensamentoAtualizado = {
      id: this.formulario.value.id || null,
      conteudo: this.formulario.value.conteudo || "",
      autoria: this.formulario.value.autoria || "",
      modelo: this.formulario.value.modelo || "",
    }
    this.service.editar(pensamentoAtualizado).subscribe(() => {
      this.router.navigate([''])
    })
  }
  cancelar(){
    this.router.navigate(['/'])
  }
  habilitarBotao(){
    if(this.formulario.valid){
      return 'botao'
    }
    return 'botao__desabilitado'
  }

}