Przyciski i wysyłka formularza

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

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

    zapisz(): void {
        this.wyslano.update(n => n + 1);
        this.ostatni.set(this.nick());
    }
}

<div class="p-3" style="width: 24rem">
  <form (ngSubmit)="zapisz()">
    <label class="form-label" for="nick">Nick</label>
    <input id="nick" name="nick" class="form-control mb-2" [(ngModel)]="nick">
    <button class="btn btn-primary" type="submit">Zapisz</button>
  </form>

  <p class="mt-3">Wysłano {{ wyslano() }} razy. Ostatnio: „{{ ostatni() }}”</p>
</div>

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

@Component({
    selector: 'app-demo',
    imports: [FormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly nick = signal('');
    readonly wyslano = signal(0);
    readonly nicki = ['Pixel', 'Bajt', 'Kursor', 'Ping'];

    zapisz(): void {
        this.wyslano.update(n => n + 1);
    }

    losuj(): void {
        const nr = Math.floor(Math.random() * this.nicki.length);
        this.nick.set(this.nicki[nr]);
    }
}

<div class="p-3" style="width: 28rem">
  <form (ngSubmit)="zapisz()">
    <label class="form-label" for="nick">Nick</label>
    <input id="nick" name="nick" class="form-control mb-2" [(ngModel)]="nick">

    <button class="btn btn-outline-warning me-2" (click)="losuj()">Losuj nick (bez type)</button>
    <button class="btn btn-outline-secondary me-2" type="button" (click)="nick.set('')">Wyczyść</button>
    <button class="btn btn-primary" type="submit">Zapisz</button>
  </form>

  <p class="mt-3">Wysłano formularz: {{ wyslano() }} razy</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 imie = signal('');
    readonly klasa = signal<string | null>(null);
    readonly komunikat = signal('');

    readonly kompletne = computed(() => this.imie().trim() !== '' && this.klasa() !== null);

    zapisz(): void {
        if (!this.kompletne()) {
            this.komunikat.set('Uzupełnij wszystkie pola.');
            return;
        }
        this.komunikat.set('Zapisano: ' + this.imie().trim() + ' (' + this.klasa() + ')');
    }
}

<div class="p-3" style="width: 24rem">
  <form (ngSubmit)="zapisz()">
    <label class="form-label" for="imie">Imię</label>
    <input id="imie" name="imie" class="form-control mb-2" [(ngModel)]="imie">

    <label class="form-label" for="klasa">Klasa</label>
    <select id="klasa" name="klasa" class="form-select mb-3" [(ngModel)]="klasa">
      <option [ngValue]="null" disabled>— wybierz —</option>
      <option [ngValue]="'1TP'">1TP</option>
      <option [ngValue]="'2TP'">2TP</option>
      <option [ngValue]="'3TP'">3TP</option>
    </select>

    <button class="btn btn-primary" type="submit">Zapisz</button>
  </form>

  <p class="mt-3">{{ komunikat() }}</p>
</div>

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

interface Zgloszenie {
    nick: string;
    gra: string;
    zgodaRodzica: boolean;
}

@Component({
    selector: 'app-demo',
    imports: [FormsModule, JsonPipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly gry = ['Tetris', 'Pac-Man', 'Bomberman'];

    readonly nick = signal('');
    readonly gra = signal('Tetris');
    readonly zgoda = signal(false);
    readonly lista = signal<Zgloszenie[]>([]);

    zapisz(): void {
        if (this.nick().trim() === '') {
            return;
        }
        const nowe: Zgloszenie = { nick: this.nick().trim(), gra: this.gra(), zgodaRodzica: this.zgoda() };
        this.lista.update(l => [...l, nowe]);
        this.wyczysc();
    }

    wyczysc(): void {
        this.nick.set('');
        this.gra.set('Tetris');
        this.zgoda.set(false);
    }
}

<div class="p-3">
  <div class="row g-4" style="max-width: 56rem">
    <div class="col-md-6">
      <form #f="ngForm" (ngSubmit)="zapisz()">
        <input name="nick" class="form-control mb-2" placeholder="Nick" [(ngModel)]="nick">
        <select name="gra" class="form-select mb-2" [(ngModel)]="gra">
          @for (g of gry; track g) { <option [ngValue]="g">{{ g }}</option> }
        </select>
        <div class="form-check mb-3">
          <input id="zgoda" name="zgodaRodzica" class="form-check-input" type="checkbox" [(ngModel)]="zgoda">
          <label class="form-check-label" for="zgoda">Mam zgodę rodzica</label>
        </div>
        <button class="btn btn-outline-secondary me-2" type="button" (click)="wyczysc()">Wyczyść</button>
        <button class="btn btn-primary" type="submit">Zgłoś</button>
      </form>
      <pre class="bg-light p-2 mt-3 small">f.value = {{ f.value | json }}</pre>
    </div>

    <div class="col-md-6">
      <h6>Zgłoszenia ({{ lista().length }})</h6>
      <ul class="list-group">
        @for (z of lista(); track $index) {
          <li class="list-group-item">
            {{ z.nick }} — {{ z.gra }}
            @if (!z.zgodaRodzica) { <span class="badge text-bg-warning">brak zgody</span> }
          </li>
        } @empty {
          <li class="list-group-item text-secondary">Brak zgłoszeń.</li>
        }
      </ul>
    </div>
  </div>
</div>