Walidacja w szablonie

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

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

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="imie">Imię *</label>
  <input id="imie" name="imie" class="form-control" required
         [(ngModel)]="imie" #poleImie="ngModel"
         [class.is-invalid]="poleImie.invalid && poleImie.touched"
         [class.is-valid]="poleImie.valid && poleImie.touched">
  <div class="invalid-feedback">Podaj imię.</div>

  <p class="small text-secondary mt-3">
    invalid: {{ poleImie.invalid }} · touched: {{ poleImie.touched }} · dirty: {{ poleImie.dirty }}
  </p>
</div>

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

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

<div class="p-3" style="width: 26rem">
  <label class="form-label" for="login">Login *</label>
  <input id="login" name="login" class="form-control"
         required minlength="4" maxlength="12" pattern="[a-z0-9]+"
         [(ngModel)]="login" #l="ngModel"
         [class.is-invalid]="l.invalid && l.touched">

  @if (l.invalid && l.touched) {
    <div class="invalid-feedback">
      @if (l.errors?.['required']) { Login jest obowiązkowy. }
      @if (l.errors?.['minlength']) {
        Za krótki: {{ l.errors?.['minlength'].actualLength }} z {{ l.errors?.['minlength'].requiredLength }} znaków.
      }
      @if (l.errors?.['pattern']) { Dozwolone są tylko małe litery i cyfry. }
    </div>
  }

  <pre class="bg-light p-2 mt-3 small">errors = {{ l.errors | json }}</pre>
</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 wiek = signal<number | null>(null);
    readonly email = signal('');
}

<div class="p-3" style="width: 26rem">
  <div class="mb-3">
    <label class="form-label" for="wiek">Wiek *</label>
    <input id="wiek" name="wiek" type="number" class="form-control"
           required min="13" max="19" [(ngModel)]="wiek" #w="ngModel"
           [class.is-invalid]="w.invalid && w.touched">
    <div class="invalid-feedback">
      @if (w.errors?.['required']) { Podaj wiek. }
      @if (w.errors?.['min']) { Minimalny wiek to {{ w.errors?.['min'].min }} lat. }
      @if (w.errors?.['max']) { Maksymalny wiek to {{ w.errors?.['max'].max }} lat. }
    </div>
  </div>

  <div class="mb-3">
    <label class="form-label" for="email">E-mail *</label>
    <input id="email" name="email" type="email" class="form-control"
           required email [(ngModel)]="email" #e="ngModel"
           [class.is-invalid]="e.invalid && e.touched">
    <div class="invalid-feedback">
      @if (e.errors?.['required']) { Podaj adres e-mail. }
      @if (e.errors?.['email']) { To nie jest poprawny adres e-mail. }
    </div>
  </div>
</div>

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

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

    zapisz(f: NgForm): void {
        if (f.invalid) {
            f.form.markAllAsTouched();
            this.wynik.set('Popraw zaznaczone pola.');
            return;
        }
        this.wynik.set('Zapisano: ' + this.imie() + ', tel. ' + this.telefon());
    }
}

<div class="p-3" style="width: 26rem">
  <form #f="ngForm" (ngSubmit)="zapisz(f)">
    <div class="mb-3">
      <label class="form-label" for="imie">Imię i nazwisko *</label>
      <input id="imie" name="imie" class="form-control" required minlength="5"
             [(ngModel)]="imie" #i="ngModel" [class.is-invalid]="i.invalid && i.touched">
      <div class="invalid-feedback">Podaj imię i nazwisko (co najmniej 5 znaków).</div>
    </div>

    <div class="mb-3">
      <label class="form-label" for="tel">Telefon rodzica *</label>
      <input id="tel" name="telefon" class="form-control" required pattern="[0-9]{9}"
             placeholder="9 cyfr bez spacji"
             [(ngModel)]="telefon" #t="ngModel" [class.is-invalid]="t.invalid && t.touched">
      <div class="invalid-feedback">Numer telefonu to 9 cyfr.</div>
    </div>

    <div class="form-check mb-3">
      <input id="reg" name="regulamin" class="form-check-input" type="checkbox" required
             [(ngModel)]="regulamin" #r="ngModel" [class.is-invalid]="r.invalid && r.touched">
      <label class="form-check-label" for="reg">Akceptuję regulamin *</label>
      <div class="invalid-feedback">Akceptacja regulaminu jest wymagana.</div>
    </div>

    <button class="btn btn-primary" type="submit">Zapisz</button>
    <p class="mt-3">{{ wynik() }}</p>
    <p class="small text-secondary">Formularz poprawny: {{ f.valid }}</p>
  </form>
</div>