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

Dúvida no método criar() do PensamentoService

O método "criar(pensamento: Pensamento)" do PensamentoService recebe com parâmetro um objeto do tipo "Pensamento", porém estamos passando "this.formulario.value" que é um objeto do tipo "FormGroup" e mesmo assim foi aceito. E fazendo testes eu percebi que se alterar o nome de alguma propriedade ou adicionar novas no "formBuilder", vai ser aceito e salvo no "db.json" e isso é um problema pois eu cometi o erro de escrever "auditoria" em vez de "autoria" e copiei e colei onde era necessário no HTML e só fui perceber o erro na hora de listar os Pensamentos pois quando ele carregou os dados do novo Pensamento, o campo Autoria estava em branco.

E este é um tipo de falha que o Typescript deveria evitar, então teria como definir que os campos do "formulario" devem ser os mesmos de Pensamento?

3 respostas
solução!

Acho que entendi o seu dilema. Isso realmente pode causar confusão, especialmente quando você se depara com um erro de digitação como "auditoria" em vez de "autoria". Esses tipos de problemas são chatos mesmo.

Para resolver isso de uma maneira mais informal, você pode definir uma estrutura fixa para o seu formulário, baseada no objeto Pensamento. Isso evita que você adicione ou altere campos sem querer.

Por exemplo, você pode criar uma interface para representar a estrutura de um Pensamento, algo assim:

// Essa interface abaixo vai ser usada para representar a estrutura de Pensamento
interface Pensamento {
    id: number;
    autor: string;
    conteudo: string;
}

// No seu componente onde você usa o FormBuilder, você tipa o FormGroup com essa interface
import { FormGroup, FormBuilder } from '@angular/forms';

export class SeuComponente {

    formulario: FormGroup;

    // Você vai inicializar o formulário e tipar com a interface Pensamento cada um dos campos
    constructor(private formBuilder: FormBuilder) {
        this.formulario = this.formBuilder.group({
            id: [''], 
            autor: [''],
            conteudo: ['']
        });
    }

}

Eu acredito que com esse código, se você tentar adicionar um novo campo no FormGroup que não está definido na interface Pensamento, o TypeScript vai te avisar sobre esse problema.

Espero ter entendido certo sua dúvida e ter contribuído com seus estudos... um abraço

Obrigado pelo retorno, me ajudou bastante. Tive que deixar os tipos como "any" na interface pois como no "formBuilder.group" ele recebe parâmetros diferentes de string e number, daria erro. Mas com as alterações do código abaixo está funcionando perfeitamente.

interface MeuFormulario {
  conteudo: any;
  autoria: any;
  modelo: any;
}
...
ngOnInit(): void {
    this.formulario = this.formBuilder.group<MeuFormulario>({
      conteudo: ['', Validators.compose([
        Validators.required,
        Validators.pattern(/(.|\s)*\S(.|\s)*/) 
      ])],
      autoria: ['',[
          Validators.required,
          Validators.minLength(3),
          Validators.maxLength(50),
          Validators.pattern(/(.|\s)*\S(.|\s)*/),
          minusculoValidator
        ]
      ],
      modelo: ['modelo1']
    })
  }

Boa !! Fico feliz em contribuir!!

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