How to use checkbox with ngFor?

Asked

Viewed 551 times

0

I am starting in Angular in my high school and need to do a project of a medical site. In one of the parts I have the following template:

<div class="container mt-5 mb-5">
    <h3>Qual a doença?</h3>
    <div class="container" *ngFor="let doenca of doencas;let i= index">
        <div class='col-2'> 
              <div class="form-check">
                  <input type="checkbox" class="form-check-input" [(ngModel)]="paciente.doenca" name="{{doenca}}" >
                  <label class="form-check-label" for="exampleCheck1">{{doenca}}</label>
                </div>
        </div>
       <p *ngIf="paciente.doenca==true && doenca=='febre'">
          <input type="radio" name="alta">Febre alta
          <input type="radio" name="media">Febre media
          <input type="radio" name="baixa">Febre alta
       </p>
    </div>
  </div>

and the following code: 

paciente:Paciente; 
 doencas=["febre","desmaio","vomito"];
(within the patient model there are several attributes, among them are the three that are cited in the disease array)

I want when clicking the checkbox to change the value of the attribute of the corresponding disease in the patient and after that to appear the tag "p" with the rest of the questions related to the disease. But the way it is, when I click all the checkboxes are marked. How to solve?

angular typescript

  • It was not clear your question, could post as is the class Patient?

  • Here’s the Github link to make it easy (the code that’s giving you trouble is on Edit-pediatra) :https://github.com/JuanGustah/PO

1 answer

1

Juan, by clicking on the checkbox change the value of a variable and make your <p> use this variable to be displayed or not:

<input type="checkbox" (change)="minhaVariavel = $event.target.checked" />
<p *ngIf="minhaVariavel">...</p>

Another point is that radios should have in their name an identification that makes that group unique. By using a name different in the 3 radios will allow the user to select more than one. To adjust:

<input type="radio" name="algumaIdentificacao1" value="alta">Febre alta
<input type="radio" name="algumaIdentificacao1" value="media">Febre media
<input type="radio" name="algumaIdentificacao1" value="baixa">Febre alta

Below is a functional example based on your scenario but probably different, since there is not all the information in the question.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  doencas = [
    { nome: 'Doença 1', checked: false, nivel: null },
    { nome: 'Doença 2', checked: false, nivel: null },
    { nome: 'Doença 3', checked: true, nivel: 'alta' }
  ];
}

Template:

<div *ngFor="let doenca of doencas">
  <input type="checkbox" 
    class="form-check-input" 
    name="{{doenca}}"
    (change)="doenca.checked = !doenca.checked"
    [checked]="doenca.checked" >
  <label class="form-check-label" for="exampleCheck1">{{doenca.nome}}</label>
  <br />
  <input
    type="radio" 
    [disabled]="!doenca.checked"
    [name]="doenca.nome"
    [checked]="doenca.nivel == 'alta'"
    (change)="doenca.nivel = 'alta'"
    value="alta">Febre alta

  <input
    type="radio"
    [disabled]="!doenca.checked"
    [name]="doenca.nome"
    [checked]="doenca.nivel == 'alta'"
    (change)="doenca.nivel = 'media'"
    value="media">Febre media

  <input 
    type="radio" 
    [disabled]="!doenca.checked"
    [name]="doenca.nome"
    [checked]="doenca.nivel == 'alta'"
    (change)="doenca.nivel = 'baixa'"
    value="baixa">Febre baixa
  <br />
  <br />
</div>

Example: https://stackblitz.com/edit/angular-f1h8n5

Browser other questions tagged angular typescript

You are not signed in. Login or sign up in order to post.