Reactive Forms — pierwsze spotkanie

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [ReactiveFormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly miasto = new FormControl('');

    lebork(): void {
        this.miasto.setValue('Lębork');
    }
}

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="miasto">Miasto</label>
  <input id="miasto" class="form-control mb-2" [formControl]="miasto">
  <button class="btn btn-outline-primary" type="button" (click)="lebork()">Wpisz Lębork</button>
  <p class="mt-3">Wartość: „{{ miasto.value }}”</p>
</div>

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
import { JsonPipe } from '@angular/common';

@Component({
    selector: 'app-demo',
    imports: [ReactiveFormsModule, JsonPipe],
    templateUrl: './demo.html'
})
export class Demo {
    readonly formularz = new FormGroup({
        imie: new FormControl(''),
        klasa: new FormControl('2TP'),
        zgoda: new FormControl(false),
    });
}

<div class="p-3" style="width: 26rem">
  <form [formGroup]="formularz">
    <input class="form-control mb-2" placeholder="Imię" formControlName="imie">
    <select class="form-select mb-2" formControlName="klasa">
      <option value="1TP">1TP</option>
      <option value="2TP">2TP</option>
      <option value="3TP">3TP</option>
    </select>
    <div class="form-check">
      <input id="zgoda" class="form-check-input" type="checkbox" formControlName="zgoda">
      <label class="form-check-label" for="zgoda">Zgoda rodzica</label>
    </div>
  </form>

  <pre class="bg-light p-2 mt-3 small" style="width: 26rem">{{ formularz.value | json }}</pre>
</div>

import { Component } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

@Component({
    selector: 'app-demo',
    imports: [ReactiveFormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly formularz = new FormGroup({
        login: new FormControl('', [Validators.required, Validators.minLength(4)]),
        email: new FormControl('', [Validators.required, Validators.email]),
        wiek: new FormControl<number | null>(null, [Validators.required, Validators.min(13), Validators.max(19)]),
    });

    readonly login = this.formularz.controls.login;
    readonly email = this.formularz.controls.email;
    readonly wiek = this.formularz.controls.wiek;
}

<div class="p-3" style="width: 26rem">
  <form [formGroup]="formularz">
    <div class="mb-3">
      <label class="form-label" for="login">Login *</label>
      <input id="login" class="form-control" formControlName="login"
             [class.is-invalid]="login.invalid && login.touched">
      <div class="invalid-feedback">
        @if (login.errors?.['required']) { Login jest obowiązkowy. }
        @if (login.errors?.['minlength']) { Login musi mieć co najmniej 4 znaki. }
      </div>
    </div>

    <div class="mb-3">
      <label class="form-label" for="email">E-mail *</label>
      <input id="email" type="email" class="form-control" formControlName="email"
             [class.is-invalid]="email.invalid && email.touched">
      <div class="invalid-feedback">Podaj poprawny adres e-mail.</div>
    </div>

    <div class="mb-3">
      <label class="form-label" for="wiek">Wiek *</label>
      <input id="wiek" type="number" class="form-control" formControlName="wiek"
             [class.is-invalid]="wiek.invalid && wiek.touched">
      <div class="invalid-feedback">Wiek od 13 do 19 lat.</div>
    </div>

    <p class="small text-secondary">Formularz poprawny: {{ formularz.valid }}</p>
  </form>
</div>

import { Component, signal } from '@angular/core';
import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';

interface Zapis {
    nick: string;
    gra: string;
}

@Component({
    selector: 'app-demo',
    imports: [ReactiveFormsModule],
    templateUrl: './demo.html'
})
export class Demo {
    readonly gry = ['Tetris', 'Pac-Man', 'Bomberman'];
    readonly lista = signal<Zapis[]>([]);

    readonly formularz = new FormGroup({
        nick: new FormControl('', { nonNullable: true, validators: [Validators.required, Validators.minLength(3)] }),
        gra: new FormControl('Tetris', { nonNullable: true }),
    });

    zapisz(): void {
        if (this.formularz.invalid) {
            this.formularz.markAllAsTouched();
            return;
        }
        this.lista.update(l => [...l, this.formularz.getRawValue()]);
        this.formularz.reset();
    }
}

<div class="p-3" style="width: 26rem">
  <form [formGroup]="formularz" (ngSubmit)="zapisz()">
    <div>
      <input class="form-control" placeholder="Nick (min. 3 znaki)" formControlName="nick"
             [class.is-invalid]="formularz.controls.nick.invalid && formularz.controls.nick.touched">
      <div class="invalid-feedback">Nick musi mieć co najmniej 3 znaki.</div>
    </div>

    <select class="form-select mt-2" formControlName="gra">
      @for (g of gry; track g) { <option [value]="g">{{ g }}</option> }
    </select>

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

  <ul class="list-group mt-3" style="width: 26rem">
    @for (z of lista(); track $index) {
      <li class="list-group-item">{{ z.nick }} — {{ z.gra }}</li>
    } @empty {
      <li class="list-group-item text-secondary">Brak zapisów.</li>
    }
  </ul>
</div>