0

Tenho 3 Checkbox. A primeira a opção é tem pão, a seguna a opção é tem peixe e a terceira tem sal. Quero usar o Tamplate forms e não reactive forms. Alguém pode me ajudar?

<form #form="ngForm">
    <label>
        <input name="" type="checkbox">Tem pao</label>
    <label name=""><input type="checkbox">Tem peixe</label>
    <label><input type="checkbox" name=""">Tem sal</label>
    <button type="submit" (click)="enviarPrint(form)">Enviar</button>
</form>

3
  • mas de fato o que precisa que ele retorne true ou false para o backend?
    – Willian
    Commented 29/09/2018 às 17:16
  • @Willian Na verdade quero retornar os nomes mesmo...Quando clicar em Tem pão, retornar para o banco "Tem pão". Quando for tem peixe, retornar para o Banco "Tem Peixe". Quando for tem sal a mesma coisa. Consegue me ajudar ?
    – Dan100
    Commented 29/09/2018 às 17:36
  • coloca o value no checkbox axo que resolve... value="tem pão", se não me engano quando ele ta false ele nao imprime o value... se for true imprime o value. ou coloca antes de enviar no enviarPrint() this.opcao2 ? 'tem pão' : 'não tem pao;
    – Willian
    Commented 29/09/2018 às 17:39

2 Respostas 2

1

Declare uma variável no seu Typescript

checks = [
    { id: 1, name: 'check 1', check:"true" },
    { id: 2, name: 'check 2', check:"false" },
    { id: 3, name: 'check 3', check:"false" },
    { id: 4, name: 'check 4', check:"true" }
  ];

E no seu HTML utilize o *ngFor

<label *ngFor="let check of checks">
    <input type="checkbox" [checked] = "check.check === 'true'" >
    {{check.name}}
</label>
1

Tudo que você precisa está nesta página, o que você precisa é colocar os três valores num array e fazer um *ngFor, ao final você terá um array onde cada índice vai possuir true ou false. O código exemplo do tutorial está aqui.

Update: Para um Template Form (o que não vai fazer sentido porque não tem diferença), basta você percorrer o formulário, verificar se o checkbox está selecionado e incluir no array.

enviarPrint(form: any | FormGroup) {
    this.array = [];
    for (const field in form.controls) {
        const control = form.controls[field];
        if(control.value === true) {
          this.array.push(field);
        }
    }
  // enviar pro back-end
  }

Exemplo no StackBlitz aqui

2
  • Esse seu método está implantando o Reactive Forms e ele comentou que está usando o Template Forms Commented 2/10/2018 às 14:34
  • Fiz um update na resposta, favor revisar o voto feito. Obrigado pela correção
    – Gaspar
    Commented 2/10/2018 às 17:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .