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

[Dúvida] Não está mudando a prévia do NgModel

Olá, tudo bem?

Estou tendo problemas com a prévia, de quando vou digitar um pensamento, ela simplesmente só vai no modelo 1, mesmo eu escolhendo os outros modelos. Insira aqui a descrição dessa imagem para ajudar na acessibilidadeEu não estou conseguindo identificar onde que está o problema:

Segue o repositório remoto do meu GitHub para dar uma olhada em meu projeto: https://github.com/DouglasIde/BibliotecaMemo

(OBS: Eu dei uma avançada e neste momento já estou na parte 06 das aulas)

Ou se preferir, segue abaixo o meu HTML de criar-pensamento.component.html:

<section class="container criar-pensamentos ff-inter">
    <header class="header">
        <h2>Adicione um <br> pensamento novo: </h2>
    </header>
    <form>
        <label for="pensamento">Pensamento</label>
        <input type="textarea" class="input" id="pensamento" name="pensamento" placeholder="Digite o pensamento" [(ngModel)]="pensamento.conteudo">
        <label for="autoria">Autoria</label>
        <input type="textarea" class="input" id="autoria" name="autoria" placeholder="Digite a autoria ou fonte" [(ngModel)]="pensamento.autoria">
        <label for="modelo">Selecione o modelo do Card: </label>
        <div class="class container-radio">
            <div class="radio-modelo">
                <label for="modelo1">
                    <input type="radio" id="modelo1" value="modelo1" name="modelo-card" [(ngModel)]="pensamento.modelo">
                        <div class="custom-radio">
                            <span></span>
                        </div>
                        <span>Modelo 1</span>
                </label>
                Prévia:
                <div class="modelo modelo1 ff-roboto-mono">
                    <img src="../../../../assets/img/modelo1.png" alt="Aspas azuis">
                    <p class="conteudo">{{ pensamento.conteudo }}</p>
                    <p class="autoria"><b>{{ pensamento.autoria }}</b></p>
                </div>
            </div>
            
            <div class="radio-modelo">
                <label for="modelo2">
                    <input type="radio" id="modelo2" value="modelo2" name="modelo-card" [(ngModel)]="pensamento.modelo">
                        <div class="custom-radio">
                            <span></span>
                        </div>
                        <span>Modelo 2</span>
                </label>
                Prévia:
                <div class="modelo modelo2 ff-roboto-mono">
                    <img src="../../../../assets/img/modelo2.png" alt="Aspas azul claro">
                    <p class="conteudo">Aqui vai o conteúdo</p>
                    <p class="autoria"><b>Aqui vai a autoria</b></p>
                </div>
            </div>
            <div class="radio-modelo">
                <label for="modelo3">
                    <input type="radio" id="modelo3" value="modelo3" name="modelo-card" [(ngModel)]="pensamento.modelo">
                        <div class="custom-radio">
                            <span></span>
                        </div>
                        <span>Modelo 3</span>
                </label>
                Prévia:
                <div class="modelo modelo3 ff-roboto-mono">
                    <img src="../../../../assets/img/modelo3.png" alt="Aspas verdes">
                    <p class="conteudo">Aqui vai o conteúdo</p>
                    <p class="autoria"><b>Aqui vai a autoria</b></p>
                </div>
            </div>
        </div>
        <div class="acoes">
            <button (click)="criarPensamento()" class="botao">Salvar</button>
            <button (click)="cancelar()" class="botao">Cancelar</button>
        </div>
    </form>
</section>

Obrigado!!!

2 respostas
solução!

Olá Douglas, tudo bem?

O problema está relacionado à atualização do conteúdo das prévias dos modelos 2 e 3. No seu código, o conteúdo dessas prévias está fixo como "Aqui vai o conteúdo" e "Aqui vai a autoria", enquanto o modelo 1 está corretamente utilizando o ngModel para atualizar dinamicamente.

Para resolver isso, você precisa garantir que os modelos 2 e 3 também utilizem o ngModel para exibir o conteúdo e a autoria digitados. Seu código pode ficar assim:

<section class="container criar-pensamentos ff-inter">
    <header class="header">
        <h2>Adicione um <br> pensamento novo: </h2>
    </header>
    <form>
        <label for="pensamento">Pensamento</label>
        <input type="textarea" class="input" id="pensamento" name="pensamento" placeholder="Digite o pensamento" [(ngModel)]="pensamento.conteudo">
        <label for="autoria">Autoria</label>
        <input type="textarea" class="input" id="autoria" name="autoria" placeholder="Digite a autoria ou fonte" [(ngModel)]="pensamento.autoria">
        <label for="modelo">Selecione o modelo do Card: </label>
        <div class="class container-radio">
            <div class="radio-modelo">
                <label for="modelo1">
                    <input type="radio" id="modelo1" value="modelo1" name="modelo-card" [(ngModel)]="pensamento.modelo">
                        <div class="custom-radio">
                            <span></span>
                        </div>
                        <span>Modelo 1</span>
                </label>
                Prévia:
                <div class="modelo modelo1 ff-roboto-mono">
                    <img src="../../../../assets/img/modelo1.png" alt="Aspas azuis">
                    <p class="conteudo">{{ pensamento.conteudo }}</p>
                    <p class="autoria"><b>{{ pensamento.autoria }}</b></p>
                </div>
            </div>
            <div class="radio-modelo">
                <label for="modelo2">
                    <input type="radio" id="modelo2" value="modelo2" name="modelo-card" [(ngModel)]="pensamento.modelo">
                        <div class="custom-radio">
                            <span></span>
                        </div>
                        <span>Modelo 2</span>
                </label>
                Prévia:
                <div class="modelo modelo2 ff-roboto-mono">
                  <img src="../../../../assets/img/modelo2.png" alt="Aspas azul claro">
                  <p class="conteudo">{{ pensamento.conteudo }}</p> 
                  <p class="autoria"><b>{{ pensamento.autoria }}</b></p>
              </div>
          </div>
          <div class="radio-modelo">
              <label for="modelo3">
                  <input type="radio" id="modelo3" value="modelo3" name="modelo-card" [(ngModel)]="pensamento.modelo">
                      <div class="custom-radio">
                          <span></span>
                      </div>
                      <span>Modelo 3</span>
              </label>
              Prévia:
              <div class="modelo modelo3 ff-roboto-mono">
                  <img src="../../../../assets/img/modelo3.png" alt="Aspas verdes">
                  <p class="conteudo">{{ pensamento.conteudo }}</p>
                  <p class="autoria"><b>{{ pensamento.autoria }}</b></p>
              </div>
          </div>
        </div>
        <div class="acoes">
            <button (click)="criarPensamento()" class="botao">Salvar</button>
            <button (click)="cancelar()" class="botao">Cancelar</button>
        </div>
    </form>
</section>

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!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Muito Obrigado, Victor!!!

Era isso mesmo kkkkk , eu não tive atenção aos detalhes.

Muito Obrigado novamente!!