[Dúvida] - Uso do [(ngModel)] | Angular 14: aplique os conceitos e desenvolva seu primeiro CRUD

Tenho uma dúvida quanto ao uso da diretiva [(ngModel)], na aula usamos esta diretiva dentro do input da label Pensamento e Autoria e também dentro do input que estão dentro de seus respectivos modelos (1, 2 e 3), para quando escrevermos um texto dentro da área de texto, também fazer a modificação dentro dos cards de modelo. Porém, quando eu comento as linhas do [(ngModel)] dentro dos inputs dos modelos, a atualização do que é escrito dentro do local apropriado de pensamento e autoria ainda são autocompletados com o conteúdo escrito no local destinado. Pra que a diretiva [(ngModel)] deve ser usada nos inputs dos modelos 1, 2 e 3, já que a diretiva já faz efeito estando somente nas inputs de Pensamento e Autoria?

Diretiva dentro do input de Pensamento e Autoria

Diretiva comentada dentro da input de modelo 1

Oi Armando! Tudo bem?

A diretiva [(ngModel)] é utilizada no Angular para criar uma ligação bidirecional entre o modelo de dados do componente TypeScript e o elemento de entrada (input) do formulário no template HTML. Isso significa que qualquer alteração feita no campo de entrada será automaticamente refletida na propriedade do modelo de dados e vice-versa.

No seu caso, ao utilizar a diretiva [(ngModel)] nos inputs de Pensamento e Autoria, você está vinculando os valores desses campos diretamente às propriedades pensamento.conteudo e pensamento.autoria do seu componente. Isso faz com que, ao digitar nesses campos, os valores sejam atualizados em tempo real no modelo de dados.

Quanto aos inputs dos modelos (1, 2 e 3), a diretiva [(ngModel)] é usada para vincular a escolha do modelo de card ao modelo de dados. Se você comentou as linhas da diretiva nos inputs dos modelos e ainda observou que a atualização está ocorrendo, pode ser que exista alguma outra ligação sendo feita no seu código que está causando esse comportamento, ou que os dados estejam sendo atualizados por meio de alguma outra interação que não depende diretamente do [(ngModel)] nos inputs dos modelos.

É importante lembrar que a atualização automática dos cards de modelo pode estar ocorrendo porque os valores de pensamento.conteudo e pensamento.autoria estão sendo utilizados diretamente nos cards de pré-visualização através da interpolação {{ }}, que é uma forma de associação de dados unidirecional. Então, mesmo que você remova a diretiva [(ngModel)] dos inputs dos modelos, a pré-visualização ainda será atualizada com base nos valores de pensamento.conteudo e pensamento.autoria.

Se você deseja que a escolha do modelo de card também seja refletida no modelo de dados e vice-versa, então você deve manter a diretiva [(ngModel)] nos inputs dos modelos. Isso garantirá que a seleção do modelo de card seja parte do seu modelo de dados e possa ser usada em outras partes da aplicação, como na lógica de negócios do componente ou ao enviar os dados para um servidor.

Um abraço e bons estudos.