angular-rules

name	angular-rules
description	Règles partagées Angular pour la toolbox Soliguide. À utiliser dès qu'on code un composant, un formulaire, une page, une modale, ou que l'utilisateur dit "ajoute un formulaire", "fais une page Angular", "modale", "validation", "accessibilité Angular", "RGAA". Documente la convention Reactive Forms obligatoire + le checklist RGAA appliqué aux formulaires.

Règles Angular Soliguide

Conventions partagées pour tous les composants Angular écrits dans la toolbox. Toujours répondre en français. Tutoyer l'utilisateur.

---

1. Formulaires : Reactive Forms par défaut

Tous les formulaires sont des ReactiveForms. Pas de [(ngModel)] ni de signal manuellement câblé avec (input). Raison : typage strict, validation déclarative, intégration Enter → submit propre, testabilité.

Pattern à suivre

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

@Component({
  selector: "app-ma-modale",
  imports: [ReactiveFormsModule],
  templateUrl: "./ma-modale.html",
})
export class MaModale {
  protected readonly form = new FormGroup({
    content: new FormControl("", {
      nonNullable: true,
      validators: [Validators.required, Validators.minLength(1)],
    }),
    username: new FormControl("", {
      nonNullable: true,
      validators: [Validators.required, Validators.maxLength(128)],
    }),
  });

  protected submit(): void {
    if (this.form.invalid) {
      this.form.markAllAsTouched();
      return;
    }
    const { content, username } = this.form.getRawValue();
    // … POST API
  }
}

<form [formGroup]="form" (ngSubmit)="submit()">
  <!-- chaque champ : <label> visible + form-control DaisyUI + formControlName -->
  …
  <button type="submit">Confirmer</button>
</form>

Règles non-négociables

• FormControl typés et nonNullable: true pour ne pas porter null partout.
• Validators déclarés dans le composant, pas dans le template.
• Bouton submit : type="submit". Tous les autres boutons du form : type="button" explicite (sinon le browser les considère comme submit et Enter les déclenche).
• (ngSubmit) sur le <form>, pas (click) sur le bouton submit. C'est ngSubmit qui assure Enter → submit.

---

2. RGAA : accessibilité obligatoire sur tous les formulaires

Tous les formulaires de la toolbox sont conformes au RGAA (Référentiel Général d'Amélioration de l'Accessibilité). Checklist appliquée systématiquement :

Labels

• Chaque champ a un <label> visible, pas juste un placeholder ou un aria-label. Le placeholder n'est pas un label.
• Pattern DaisyUI :

  <label class="form-control">
    <div class="label">
      <span class="label-text">Pseudo</span>
      <span class="label-text-alt">Signe la note</span>
    </div>
    <input type="text" class="input input-bordered" formControlName="username" />
  </label>
  

• Le <label> qui englobe l'input est suffisant (le clic sur le texte focus l'input). Pas besoin de for="" quand on l'englobe.

Clavier

• Espace et Entrée sur un bouton focus doivent déclencher l'action. Toujours utiliser <button type="…">, jamais <div role="button">.
• Enter dans un input texte d'un formulaire doit déclencher le submit. Garanti par (ngSubmit) + <button type="submit">.
• Enter dans un <textarea> reste un saut de ligne (comportement natif, attendu).
• Pour les dropdowns DaisyUI : le trigger doit être un <button>. Le menu s'ouvre via :focus-within (CSS pur).

Erreurs

• Toujours afficher les erreurs en rouge avec une classe DaisyUI : text-error, alert alert-error alert-soft.
• Erreurs de validation par champ : affichées sous le champ quand controls.X.touched && controls.X.errors.
• Erreur API globale : alert alert-error alert-soft dans la modale.

<input formControlName="username" />
@if (form.controls.username.touched && form.controls.username.errors) {
<span class="text-error text-xs mt-1">Pseudo requis.</span>
}

Aria

• Si un champ n'a vraiment pas pu avoir de <label> visible (cas exceptionnel), aria-label minimum.
• <dialog> natif HTML pour les modales (DaisyUI class="modal"), pas de <div role="dialog">. Le natif gère focus trap + Esc.

---

3. CSS / Style

• Aucun CSS custom. Utiliser uniquement les classes DaisyUI et Tailwind.
• Les composants DaisyUI à connaître pour les formulaires : form-control, label, label-text, label-text-alt, input, input-bordered, textarea, textarea-bordered, select, checkbox, radio, btn, alert.
• Tailles : input-sm / btn-sm quand on est dans une barre dense (header, toolbar). Sinon input-md / btn-md.

---

4. Composants standalone par défaut

• Composants standalone: true (défaut Angular 20). Pas de NgModule.
• imports: [...] au niveau du @Component. Inclure ReactiveFormsModule quand le template utilise [formGroup] ou formControlName.
• Pour qu'un composant prenne sa largeur naturelle dans un parent inline/flex, déclarer son display via host: { class: "inline-flex items-center align-middle" } (sinon le défaut Angular est display: inline → enfants block sans largeur).

---

5. Favicon Soliguide

Dans le public/ du dashboard Angular (servi tel quel par Angular CLI à la racine), toujours utiliser le favicon partagé :

cp assets/images/icons/favicon.ico projects/<nom>/apps/dashboard/public/favicon.ico

Le fichier source est assets/images/icons/favicon.ico (Solinum officiel — set complet PWA dispo dans le même dossier : favicon-16x16.png, favicon-32x32.png, apple-icon-*.png, manifest.json).

Dans le <head> du src/index.html :

<link rel="icon" type="image/x-icon" href="favicon.ico" />

Ne jamais garder le favicon par défaut généré par ng new — c'est la base de cohérence visuelle avec les autres outils Soliguide.

---

6. Modales

• <dialog> natif HTML stylé avec class="modal" DaisyUI.
• Ouverture / fermeture via dialog().nativeElement.showModal() / .close() (viewChild typé ElementRef<HTMLDialogElement>).
• Backdrop : <form method="dialog" class="modal-backdrop"> natif, ferme au clic dehors.
• Form principal : <form [formGroup]> séparé du backdrop. Ne pas mélanger les deux.

---

En résumé

Un formulaire correct dans la toolbox :

✅ Reactive Form (FormGroup + FormControl typés) ✅ <form [formGroup] (ngSubmit)> + bouton submit type="submit" ✅ Autres boutons du form : type="button" explicite ✅ Chaque champ : <label> visible (form-control DaisyUI) ✅ Erreurs par champ : text-error sous l'input ✅ Erreur globale : alert alert-error alert-soft ✅ Modale : <dialog> natif + backdrop séparé ✅ Pas de CSS custom, uniquement DaisyUI / Tailwind ✅ Pas de [(ngModel)], pas de <div role="button">