Pola tekstowe: text, password, email, textarea

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

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

<div class="p-3" style="width: 24rem">
  <label class="form-label" for="login">Login</label>
  <input id="login" name="login" type="text" class="form-control mb-3"
         autocomplete="off" [(ngModel)]="login">

  <label class="form-label" for="haslo">Hasło</label>
  <div class="input-group">
    <input id="haslo" name="haslo" class="form-control"
           [type]="widoczne() ? 'text' : 'password'" [(ngModel)]="haslo">
    <button class="btn btn-outline-secondary" type="button"
            (click)="widoczne.set(!widoczne())">
      {{ widoczne() ? 'Ukryj' : 'Pokaż' }}
    </button>
  </div>
  <p class="mt-3 text-secondary">Hasło ma {{ haslo().length }} 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 email = signal('');

    readonly wygladaDobrze = computed(() => {
        const tekst = this.email().trim();
        const malpa = tekst.indexOf('@');
        return malpa > 0
            && tekst.lastIndexOf('@') === malpa
            && tekst.indexOf('.', malpa) > malpa + 1;
    });
}

<div class="p-3" style="width: 26rem">
  <label class="form-label" for="email">Adres e-mail rodzica</label>
  <input id="email" name="email" type="email" class="form-control"
         placeholder="np. jan.kowalski@poczta.pl" [(ngModel)]="email">

  @if (email() === '') {
    <p class="form-text">Wyślemy tu potwierdzenie zapisu.</p>
  } @else if (wygladaDobrze()) {
    <p class="text-success mt-2">Wygląda poprawnie.</p>
  } @else {
    <p class="text-danger mt-2">To nie wygląda na adres e-mail.</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 limit = 200;
    readonly opis = signal('');
    readonly zostalo = computed(() => this.limit - this.opis().length);
}

<div class="p-3" style="width: 30rem">
  <label class="form-label" for="opis">Opisz swoją drużynę</label>
  <textarea id="opis" name="opis" class="form-control" rows="4"
            [maxlength]="limit" [(ngModel)]="opis"></textarea>

  <p class="form-text text-end"
     [class.text-danger]="zostalo() < 20">
    Zostało znaków: {{ zostalo() }} / {{ limit }}
  </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 temat = signal('');
    readonly tresc = signal('');
    readonly wyslane = signal<string[]>([]);

    readonly gotowe = computed(() =>
        this.temat().trim() !== '' && this.tresc().trim() !== ''
    );

    wyslij(): void {
        this.wyslane.update(lista => [...lista, this.temat().trim()]);
        this.temat.set('');
        this.tresc.set('');
    }
}

<div class="p-3">
  <div class="row g-4" style="max-width: 56rem">
    <div class="col-md-6">
      <label class="form-label" for="temat">Temat</label>
      <input id="temat" name="temat" class="form-control mb-2" [(ngModel)]="temat">
      <label class="form-label" for="tresc">Treść</label>
      <textarea id="tresc" name="tresc" class="form-control mb-2" rows="5" [(ngModel)]="tresc"></textarea>
      <button class="btn btn-primary" [disabled]="!gotowe()" (click)="wyslij()">Wyślij</button>
      <p class="mt-3 small">Wysłane tematy: {{ wyslane().join(', ') || 'brak' }}</p>
    </div>
    <div class="col-md-6">
      <div class="card">
        <div class="card-header">{{ temat() || '(bez tematu)' }}</div>
        <div class="card-body" style="white-space: pre-line">{{ tresc() || '(pusta wiadomość)' }}</div>
      </div>
    </div>
  </div>
</div>