[ngModel] i (ngModelChange) w praktyce

<input [(ngModel)]="nr">
<input [ngModel]="nr()" (ngModelChange)="nr.set($event)">
<!-- zamiast nr.set($event) możesz wywołać własną metodę: -->
<input [ngModel]="nr()" (ngModelChange)="ustawNumer($event)">

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 zmian = signal(0);
    readonly historia = signal<string[]>([]);

    zmienNick(nowy: string): void {
        this.nick.set(nowy);
        this.zmian.update(n => n + 1);
        this.historia.update(h => [nowy, ...h].slice(0, 5));
    }
}

<div class="p-3" style="width: 26rem">
  <label class="form-label" for="nick">Nick</label>
  <input id="nick" name="nick" class="form-control mb-2"
         [ngModel]="nick()" (ngModelChange)="zmienNick($event)">
  <p class="mb-1">Zmian: {{ zmian() }}</p>
  <p class="small text-secondary">Ostatnie wartości: {{ historia().join(' ← ') }}</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 nr = signal('');
    readonly poprawny = computed(() => this.nr().length >= 4 && this.nr().length <= 8);

    ustawNumer(tekst: string): void {
        this.nr.set(tekst.toUpperCase().replaceAll(' ', ''));
    }
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="nr">Numer rejestracyjny</label>
  <input id="nr" name="nr" class="form-control font-monospace fs-4"
         [ngModel]="nr()" (ngModelChange)="ustawNumer($event)">

  <p class="mt-2" [class.text-success]="poprawny()" [class.text-danger]="!poprawny()">
    {{ poprawny() ? 'Numer przyjęty: ' + nr() : 'Numer musi mieć od 4 do 8 znaków.' }}
  </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 katalog: Record<string, string[]> = {
        'Gry': ['Turniej retro', 'Planszówki'],
        'Technika': ['Noc robotów', 'Warsztat druku 3D'],
    };
    readonly kategorie = Object.keys(this.katalog);

    readonly kategoria = signal<string | null>(null);
    readonly wydarzenie = signal<string | null>(null);
    readonly historia = signal<string[]>([]);

    readonly wydarzenia = computed(() => {
        const k = this.kategoria();
        return k === null ? [] : this.katalog[k];
    });

    zmienKategorie(nowa: string): void {
        this.kategoria.set(nowa);
        this.wydarzenie.set(null);
        this.historia.update(h => [...h, nowa]);
    }
}

<div class="p-3" style="width: 26rem">
  <select name="kat" class="form-select mb-2"
          [ngModel]="kategoria()" (ngModelChange)="zmienKategorie($event)">
    <option [ngValue]="null" disabled>— kategoria —</option>
    @for (k of kategorie; track k) { <option [ngValue]="k">{{ k }}</option> }
  </select>

  <select name="wyd" class="form-select mb-3" [(ngModel)]="wydarzenie">
    <option [ngValue]="null" disabled>— wydarzenie —</option>
    @for (w of wydarzenia(); track $index) { <option [ngValue]="w">{{ w }}</option> }
  </select>

  <p>Wybór: {{ kategoria() ?? '?' }} → {{ wydarzenie() ?? '?' }}</p>
  <p class="small text-secondary">Historia kategorii: {{ historia().join(' → ') }}</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 sprzet = ['Pad', 'Słuchawki', 'Klawiatura', 'Mysz'];
    readonly wybrane = signal<string[]>(['Pad']);

    ustaw(nazwa: string, zaznaczony: boolean): void {
        this.wybrane.update(lista =>
            zaznaczony ? [...lista, nazwa] : lista.filter(x => x !== nazwa)
        );
    }
}

<div class="p-3" style="width: 26rem">
  <p class="fw-bold">Co przyniesiesz na turniej?</p>
  @for (s of sprzet; track s; let i = $index) {
    <div class="form-check">
      <input [id]="'s' + i" [name]="'s' + i" class="form-check-input" type="checkbox"
             [ngModel]="wybrane().includes(s)" (ngModelChange)="ustaw(s, $event)">
      <label class="form-check-label" [for]="'s' + i">{{ s }}</label>
    </div>
  }
  <p class="mt-3">Lista: {{ wybrane().join(', ') || 'nic' }}</p>
</div>