Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

não mudando opção nos modelos

segue meu codigo e o erro

<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
      class="input"
      type="textarea"
      name="pensamento"
      id="pensamento"
      placeholder="Digite o pensamento"
      [(ngModel)]="pensamento.conteudo"
    > <!-- os colchetes acima informam a passagem de dados do ts para o html, se chama property binding -->
    <label for="Autoria ou fonte">Autoria</label>
    <input
      class="input"
      type="text"
      name="Autoria"
      id="Autoria"
      placeholder="Digite a Autoria ou fonte"
      [(ngModel)]="pensamento.autoria"
    >
    <label for="modelo">Selecione o modelo do card:</label>
    <div 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/imagens/modelo1.png" alt="aspas azuis">
          <p class="conteudo">{{ pensamento.conteudo }}</p>
          <p class="conteudo"><b></b>{{ pensamento.autoria }}</p>
          <!-- O que for inserido dentro destas chaves duplas será considerado como uma variável e seu conteúdo, se este existir, será impresso -->
        </div>
      </div>

      <div class="radio-modelo">
        <label for=""modelo2>
          <input type="radio" id="modelo1" value="modelo1" 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/imagens/modelo2.png" alt="aspas azul claro">
          <p class="conteudo">{{ pensamento.conteudo }}</p>
          <p class="conteudo"><b></b>{{ pensamento.autoria }}</p>
        </div>
      </div>

      <div class="radio-modelo">
        <label for="modelo3">
          <input type="radio" id="modelo1" value="modelo1" 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/imagens/modelo3.png" alt="aspas verdes">
          <p class="conteudo">{{ pensamento.conteudo }}</p>
          <p class="conteudo"><b></b>{{ pensamento.autoria }}</p>
        </div>
      </div>
    </div>

    <div class="acoes">
      <!--usando event binding abaixo, se cria primeiro no hrml e logo apos no ts component-->
      <button (click)="criarPensamento()" class="botao">
        Salvar
      </button>
      <button (click)="cancelarPensamento()" class="botao">
        Cancelar
      </button>
    </div>
  </form>
</section>


ts
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-criar-pensamento',
  templateUrl: './criar-pensamento.component.html',
  styleUrls: ['./criar-pensamento.component.css']
})

export class CriarPensamentoComponent implements OnInit{
  pensamento = {
    id: '1',
    conteudo: 'Apendendo angular',
    autoria: 'Dev',
    modelo: 'modelo1'
  }

  constructor(){
    
  }

  criarPensamento(){
    alert('aaaa')
  }

  cancelarPensamento(){

  }

  ngOnInit(): void {

  }
}

erro Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta
solução!

Oii Lorraine, tudo bem?

No trecho de código dos inputs de rádio, você repetiu o mesmo id="modelo1" e o mesmo value="modelo1" para todos modelos. Cada input de rádio deve ter um id e um value únicos para que possam ser diferenciados corretamente. Além disso, no segundo input de rádio, há um erro de sintaxe na tag <label for=""modelo2> onde as aspas não foram fechadas corretamente.

Código criar-pensamento.component.html corrigido:

<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 ou fonte</label>
    <input
      type="text"
      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="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/imagens/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/imagens/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/imagens/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>

E o código criar-pensamento.component.ts completo:

import { Component, OnInit } from '@angular/core';

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

  pensamento = {
    id: '1',
    conteudo: 'Aprendendo Angular',
    autoria: 'Dev',
    modelo: 'modelo1'
  }

  constructor() { }

  ngOnInit(): void {
  }

  criarPensamento() {
    alert("Novo pensamento criado!")
  }

  cancelar() {
    alert("Ação cancelada!")
  }

}

Espero que tenha te ajudado. Lembre-se que você sempre pode conferir o código da aula no repositório GitHub: Código da aula 2 completo.

Um abraço e bons estudos.