Dificuldade no two way data binding - Angular 14

Olá, Flávio!

Primeiro, verifique se você importou corretamente o FormsModule no seu arquivo app.module.ts. O código deveria ser algo assim:

@NgModule({
  declarations: [
    AppComponent,
    CabecalhoComponent,
    RodapeComponent,
    CriarPensamentoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Uma informação que pode ser muito útil é a respeito de qual a mensagem de erro está sendo exibida, pois pode ser um bom indicativo. Por favor, compare as outras partes do código com os componentes feitos em aula, link do repositório.

Em caso de persistência é válido compartilhar o seu projeto comigo via GitHub, a fim de saber se é um erro de ambiente ou de código.

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso ✨

Um grande abraço e até mais!

Olá! Então, eu contornei o problema só para conseguir prosseguir com as aulas, mas queria fazer funcionar o two way data biding. A minha gabiarra foi essa:

<input type="textarea" class="input" id="pensamento" placeholder="Digite o seu pensamento"
      [value]="pensamento.conteudo" (input)="pensamento.conteudo=getValue($event)">

import { Component, OnInit } from '@angular/core';
import { Pensamento } from 'src/app/pensamentos/pensamento';
import { PensamentoService } from '../pensamento.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-cria-pensamento',
  templateUrl: './cria-pensamento.component.html',
  styleUrls: ['./cria-pensamento.component.css']
})
export class CriaPensamentoComponent implements OnInit {

  pensamento: Pensamento = { conteudo: '', autoria: '', modelo: 'modelo1' };

  constructor(private service: PensamentoService, private router: Router) { }

  ngOnInit(): void {
  }


  criarPensamento() {
    this.service.criar(this.pensamento).subscribe(() => {
      this.router.navigate(['/listarPensamento']);
    })
  }

  getValue(event: Event): string {
    return (event.target as HTMLInputElement).value;
  }

}

No arquivo app.module.ts eu fiz a importação do "FormsModule":

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CabecalhoComponent } from './componentes/cabecalho/cabecalho.component';
import { RodapeComponent } from './componentes/rodape/rodape.component';
import { CriaPensamentoComponent } from './componentes/pensamentos/cria-pensamento/cria-pensamento.component';
import { ListarPensamentoComponent } from './componentes/pensamentos/listar-pensamento/listar-pensamento.component';
import { PensamentoComponent } from './componentes/pensamentos/pensamento/pensamento.component';
import { HttpClientModule } from '@angular/common/http';
import { ExcluirPensamentoComponent } from './componentes/excluir-pensamento/excluir-pensamento.component';
import { EditarPensamentoComponent } from './componentes/pensamentos/editar-pensamento/editar-pensamento.component';

@NgModule({
  declarations: [
    AppComponent,
    CabecalhoComponent,
    RodapeComponent,
    CriaPensamentoComponent,
    ListarPensamentoComponent,
    PensamentoComponent,
    ExcluirPensamentoComponent,
    EditarPensamentoComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

A Mensagem de erro que aparece no console do navegador é essa:

ERROR Error: NG01352: If ngModel is used within a form tag, either the name attribute must be set or the form
    control must be defined as 'standalone' in ngModelOptions.

    Example 1: <input [(ngModel)]="person.firstName" name="first">
    Example 2: <input [(ngModel)]="person.firstName" [ngModelOptions]="{standalone: true}">
    Angular 11
    CriaPensamentoComponent_Template cria-pensamento.component.html:12
    Angular 20
    RxJS 6
    Angular 12
core.mjs:9171:22

Acabei de subir o código para o GitHub, para conseguir me ajudar https://github.com/MannyShussan/Memoteca-Alura

Olá Flávio!

Peço desculpas pela demora em obter um retorno

Comigo não ocorreu o mesmo erro, ao utilizar o seu projeto o mesmo estava funcional, pois você tinha reparado, mas eu tentei recriar erro com esse código mencionado por ti anteriormente:

   <label for="pensamento">Pensamento</label>
    <input type="textarea" class="input" id="pensamento" placeholder="Digite o seu pensamento" [(ngModel)]="pensamento.conteudo">
    <label for="autoria">Autoria</label>
    <input type="textarea" class="input" id="autoria" placeholder="Digite a autoria ou fonte" [(ngModel)]="pensamento.autoria">
    <label for="modelo">Selecione o modelo do card</label>

Durante este curso e no próximo, o código passará por algumas correções e evoluções. Em outras palavras, o código não permanecerá o mesmo com o tempo, mas você pode seguir as dicas do próprio terminal, como usar o name, que pode estar faltando. No código da aula, há um atributo dentro de input, mas no seu projeto não, e o terminal está indicando o erro "the name attribute must be set" (O atributo name deve ser definido).

<input
      type="textarea"
      class="input"
      id="pensamento"
      name="pensamento" // essa linha está em falta e o terminal acusa a falta da mesma 
      placeholder="Digite o pensamento"
      [(ngModel)]="pensamento.conteudo"
    >

Portanto, apesar de não ter lidado com o erro, para solucionar, o aviso no seu terminal, seguindo a dica do mesmo, podemos adicionar o atributo name.

Espero ter ajudado e peço desculpas novamente pela demora em obter um retorno.

Abraços!

Obrigado, me ajudou muito, mas no começo da semana com ajuda de um Aluno da Alura, pelo discord ele me ajudou a achar esse erro. Acho que eu estava tão fissurado em fazer funcionar que não reparei esse meu erro, e nem li o terminal direito. Vou prestar mais atenção da próxima vez.