Signal Forms — les bases

import { Component, signal } from '@angular/core';
import { FormField, FormRoot, email, form, minLength, required } from '@angular/forms/signals';

interface Login {
  email: string;
  password: string;
}

@Component({
  selector: 'app-login',
  imports: [FormField, FormRoot],
  template: `
    <form [formRoot]="loginForm">
      <input type="email" [formField]="loginForm.email" />
      @if (loginForm.email().touched() && loginForm.email().invalid()) {
        @for (e of loginForm.email().errors(); track e.kind) { <small>{{ e.message }}</small> }
      }

      <input type="password" [formField]="loginForm.password" />

      <button type="submit" [disabled]="loginForm().submitting()">Se connecter</button>
    </form>
  `,
})
export class LoginForm {
  // 1. LE MODÈLE : un signal ordinaire — la source de vérité
  readonly model = signal<Login>({ email: '', password: '' });

  // 2. LE FORMULAIRE : un arbre de champs au-dessus du modèle + le SCHÉMA de règles
  readonly loginForm = form(
    this.model,
    (path) => {
      required(path.email, { message: 'L’e-mail est obligatoire' });
      email(path.email, { message: 'E-mail invalide' });
      required(path.password);
      minLength(path.password, 8, { message: '8 caractères minimum' });
    },
    { submission: { action: async (f) => this.auth.login(f().value()) } },
  );
}

// Le modèle et le formulaire sont la MÊME chose — il n’y a aucune copie interne
this.model.set({ email: 'ana@atlas.dev', password: '' }); // → l’input se met à jour
this.loginForm.email().value.set('x@y.ro');                 // → model() se met à jour

// Cela signifie :
//  - vous chargez les données du serveur avec model.set(...)
//  - vous pouvez tout dériver avec computed(() => this.model().email)
//  - plus de patchValue / setValue / valueChanges

// Chaque nœud de l’arbre est une fonction : appelez-la et vous obtenez l’état (signals)
const email = this.loginForm.email();   // FieldState<string>

email.value();        // WritableSignal<string> — lié directement au modèle
email.value.set('a@b.ro');
email.valid();  email.invalid();  email.pending();
email.touched();  email.dirty();
email.errors();       // ValidationError[] — { kind, message }
email.getError('email');
email.disabled();  email.hidden();  email.readonly();  email.required();
email.markAsTouched();
email.focus();        // v21.1 : focus sur le contrôle lié

// Le formulaire entier est aussi un champ
this.loginForm().valid();
this.loginForm().submitting();
this.loginForm().errorSummary(); // toutes les erreurs de l’arbre
this.loginForm().reset();

import { email, max, maxLength, min, minLength, pattern, required, validate } from '@angular/forms/signals';

form(this.model, (p) => {
  required(p.name, { message: 'Obligatoire' });
  minLength(p.name, 2);
  maxLength(p.bio, 280);
  email(p.email);
  min(p.age, 18, { message: '18 ans minimum' });
  max(p.age, 120);
  pattern(p.zip, /^\d{6}$/, { message: 'Code postal à 6 chiffres' });
  required(p.terms); // sur un booléen : false = invalide (comme une case à cocher native)

  // conditionnel
  required(p.company, { when: ({ valueOf }) => valueOf(p.type) === 'business' });

  // personnalisé, entre des champs
  validate(p.confirm, ({ value, valueOf }) =>
    value() !== valueOf(p.password) ? { kind: 'mismatch', message: 'Les mots de passe ne correspondent pas' } : undefined,
  );
});

// Option 1 : submission dans les options de form() + <form [formRoot]>
readonly f = form(this.model, schemaFn, {
  submission: {
    action: async (field) => {
      try {
        await this.api.register(field().value());
        return undefined;                                  // succès
      } catch {
        // erreurs serveur liées à un champ précis
        return { kind: 'taken', message: 'E-mail déjà utilisé', fieldTree: field.email };
      }
    },
    onInvalid: (field) => field().errorSummary()[0]?.fieldTree().focus(), // focus sur la première erreur
  },
});

// Option 2 : un submit() manuel
async save() {
  await submit(this.f, async (field) => this.api.save(field().value()));
}

<!-- [formField] fonctionne sur tous les contrôles natifs : -->
<input [formField]="f.name" />                      <!-- string -->
<input type="number" [formField]="f.age" />         <!-- number | null -->
<input type="checkbox" [formField]="f.terms" />     <!-- boolean -->
<input type="date" [formField]="f.birthday" />      <!-- string / Date -->
<select [formField]="f.country">...</select>
<textarea [formField]="f.bio"></textarea>
<input type="radio" value="a" [formField]="f.plan" />

<!-- et sur les contrôles personnalisés : FormValueControl / FormCheckboxControl / ControlValueAccessor -->
<app-rating-control [formField]="f.rating" />