Radio — jeden wybór z kilku

import { Component, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly rozmiar = signal('M');
}

<div class="p-3">
  <p class="fw-bold mb-2">Rozmiar koszulki drużyny</p>
  <div class="form-check form-check-inline">
    <input id="r-s" name="rozmiar" class="form-check-input" type="radio" value="S" [(ngModel)]="rozmiar">
    <label class="form-check-label" for="r-s">S</label>
  </div>
  <div class="form-check form-check-inline">
    <input id="r-m" name="rozmiar" class="form-check-input" type="radio" value="M" [(ngModel)]="rozmiar">
    <label class="form-check-label" for="r-m">M</label>
  </div>
  <div class="form-check form-check-inline">
    <input id="r-l" name="rozmiar" class="form-check-input" type="radio" value="L" [(ngModel)]="rozmiar">
    <label class="form-check-label" for="r-l">L</label>
  </div>

  <p class="mt-3">Zamawiasz koszulkę w rozmiarze <strong>{{ rozmiar() }}</strong>.</p>
</div>

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly cenaBiletu = signal(20);
    readonly ile = signal<number | null>(2);

    readonly razem = computed(() => this.cenaBiletu() * (this.ile() ?? 0));
}

<div class="card m-3 p-3" style="width: 24rem">
  <div class="form-check">
    <input id="normalny" name="bilet" class="form-check-input" type="radio"
           [value]="20" [(ngModel)]="cenaBiletu">
    <label class="form-check-label" for="normalny">Normalny — 20 zł</label>
  </div>
  <div class="form-check">
    <input id="ulgowy" name="bilet" class="form-check-input" type="radio"
           [value]="12" [(ngModel)]="cenaBiletu">
    <label class="form-check-label" for="ulgowy">Ulgowy (uczeń) — 12 zł</label>
  </div>
  <div class="form-check mb-3">
    <input id="rodzinny" name="bilet" class="form-check-input" type="radio"
           [value]="15" [(ngModel)]="cenaBiletu">
    <label class="form-check-label" for="rodzinny">Rodzinny — 15 zł</label>
  </div>

  <label class="form-label" for="ile">Liczba biletów</label>
  <input id="ile" name="ile" type="number" min="1" class="form-control mb-3" [(ngModel)]="ile">

  <p class="fs-5 fw-bold mb-0">Razem: {{ razem() }} zł</p>
</div>

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

interface Dostawa {
    id: number;
    nazwa: string;
    cena: number;
    dni: number;
}

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly dostawy: Dostawa[] = [
        { id: 1, nazwa: 'Odbiór w sekretariacie', cena: 0, dni: 1 },
        { id: 2, nazwa: 'Paczkomat', cena: 12.99, dni: 2 },
        { id: 3, nazwa: 'Kurier', cena: 17.5, dni: 1 },
    ];
    readonly wybranaId = signal(1);

    readonly wybrana = computed(() => this.dostawy.find(d => d.id === this.wybranaId()));
}

<div class="p-3" style="width: 28rem">
  <p class="fw-bold">Jak dostarczyć koszulki?</p>
  @for (d of dostawy; track d.id) {
    <div class="form-check">
      <input [id]="'dost' + d.id" name="dostawa" class="form-check-input" type="radio"
             [value]="d.id" [(ngModel)]="wybranaId">
      <label class="form-check-label" [for]="'dost' + d.id">{{ d.nazwa }}</label>
    </div>
  }

  @if (wybrana(); as w) {
    <div class="alert alert-info mt-3 mb-0">
      {{ w.nazwa }}: {{ w.cena === 0 ? 'bezpłatnie' : w.cena.toFixed(2) + ' zł' }},
      czas: {{ w.dni }} dni
    </div>
  }
</div>

import { Component, computed, signal } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly odp1 = signal('');
    readonly odp2 = signal('');
    readonly sprawdzone = signal(false);

    readonly kompletne = computed(() => this.odp1() !== '' && this.odp2() !== '');
    readonly punkty = computed(() =>
        (this.odp1() === 'b' ? 1 : 0) + (this.odp2() === 'a' ? 1 : 0)
    );
}

<div class="p-3" style="width: 30rem">
  <p class="fw-bold mb-1">1. Który znacznik HTML tworzy pole wielowierszowe?</p>
  <div class="form-check">
    <input id="p1a" name="pytanie1" class="form-check-input" type="radio" value="a" [(ngModel)]="odp1">
    <label class="form-check-label" for="p1a">&lt;input type="multi"&gt;</label>
  </div>
  <div class="form-check">
    <input id="p1b" name="pytanie1" class="form-check-input" type="radio" value="b" [(ngModel)]="odp1">
    <label class="form-check-label" for="p1b">&lt;textarea&gt;</label>
  </div>
  <div class="form-check mb-3">
    <input id="p1c" name="pytanie1" class="form-check-input" type="radio" value="c" [(ngModel)]="odp1">
    <label class="form-check-label" for="p1c">&lt;text&gt;</label>
  </div>

  <p class="fw-bold mb-1">2. Co zwraca <code>pole.value</code> z pola <code>type="number"</code>?</p>
  <div class="form-check">
    <input id="p2a" name="pytanie2" class="form-check-input" type="radio" value="a" [(ngModel)]="odp2">
    <label class="form-check-label" for="p2a">tekst</label>
  </div>
  <div class="form-check mb-3">
    <input id="p2b" name="pytanie2" class="form-check-input" type="radio" value="b" [(ngModel)]="odp2">
    <label class="form-check-label" for="p2b">liczbę</label>
  </div>

  <button class="btn btn-primary" [disabled]="!kompletne()" (click)="sprawdzone.set(true)">Sprawdź</button>
  @if (sprawdzone()) {
    <p class="mt-3 fs-5" [class.text-success]="punkty() === 2">Wynik: {{ punkty() }} / 2</p>
  }
</div>