Angular Reaktív űrlap jelölőnégyzet

• Szerző: Sallai András
• Copyright © 2025, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

          <input type="checkbox" 
          [checked]="emp.car" 
          disabled> 

<h1>Dolgozók</h1>
 
 
<table>
  <thead>
    <tr>
      <th>Id</th>
      <th>Név</th>
      <th>Település</th>
      <th>Fizetés</th>
      <th>Kocsi</th>
    </tr>
  </thead>
  <tbody>
    @for(emp of empList; track emp.id) {
      <tr>
        <td>{{emp.id}}</td>
        <td>{{emp.name}}</td>
        <td>{{emp.city}}</td>
        <td>{{emp.salary}}</td>
        <td>
          <input type="checkbox" 
          [checked]="emp.car" 
          disabled>          
        </td>
      </tr>
    }
</table>

Ha új dolgozót szeretnénk felvenni és annak nincs kocsija, a rögzítéskor false helyett üres érték érkezhet. Megoldás ha TypeScript oldalon eleve false-ra inicializáljuk.

    this.empForm = this.builder.group({
      id: [''],
      name: [''],
      city: [''],
      salary: [''],
      car: [false]
    })