z3n/datacat
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(forms): erreurs de validation par champ au blur

Browse Source 
- Erreurs affichées sous chaque champ obligatoire (fr-error-text DSFR)
  au lieu d'un message global en haut du formulaire
- Déclenchement sur blur (sortie du champ) et effacement sur input
- Concerne la modale édition API et la modale catégorie

Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-Authored-By: Claude <noreply@anthropic.com>
Co-Authored-By: Happy <yesreply@happy.engineering>
This commit is contained in:
z3n
2026-06-09 13:17:18 +00:00
parent af02cf6808
commit abc20bc9e8
2 changed files with 27 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
front-public/src/app/pages/api-detail/api-detail.component.ts
View File

@@ -242,13 +242,19 @@ import { ApiEntry, Category } from '@datacat/shared';
@if (editError()) {
<div class="fr-alert fr-alert--error fr-mb-2w"><p>{{ editError() }}</p></div>
}
<div class="fr-input-group fr-mb-2w">
<div class="fr-input-group fr-mb-2w" [class.fr-input-group--error]="editTitleError()">
<label class="fr-label" for="edit-title">Titre <span style="color:var(--text-default-error)">*</span></label>
<input id="edit-title" class="fr-input" type="text" [value]="editTitle()" (input)="editTitle.set($any($event.target).value)" />
<input id="edit-title" class="fr-input" [class.fr-input--error]="editTitleError()" type="text" [value]="editTitle()"
(input)="editTitle.set($any($event.target).value); editTitleError.set(false)"
(blur)="editTitleError.set(!editTitle().trim())" />
@if (editTitleError()) { <p class="fr-error-text">Le titre est obligatoire.</p> }
</div>
<div class="fr-input-group fr-mb-2w">
<div class="fr-input-group fr-mb-2w" [class.fr-input-group--error]="editVersionError()">
<label class="fr-label" for="edit-version">Version <span style="color:var(--text-default-error)">*</span></label>
<input id="edit-version" class="fr-input" type="text" [value]="editVersion()" (input)="editVersion.set($any($event.target).value)" />
<input id="edit-version" class="fr-input" [class.fr-input--error]="editVersionError()" type="text" [value]="editVersion()"
(input)="editVersion.set($any($event.target).value); editVersionError.set(false)"
(blur)="editVersionError.set(!editVersion().trim())" />
@if (editVersionError()) { <p class="fr-error-text">La version est obligatoire.</p> }
</div>
<div class="fr-select-group fr-mb-2w">
<label class="fr-label" for="edit-category">Catégorie</label>
@@ -315,6 +321,8 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
showEditModal = signal(false);
editLoading = signal(false);
editError = signal<string | null>(null);
editTitleError = signal(false);
editVersionError = signal(false);
categories = signal<Category[]>([]);
editTitle = signal('');
editVersion = signal('');
@@ -365,6 +373,8 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
this.editContactTechnical.set(entry.contactTechnical ?? '');
this.editAccessRights.set(entry.accessRights ?? '');
this.editError.set(null);
this.editTitleError.set(false);
this.editVersionError.set(false);
this.categoryService.list().subscribe((res) => this.categories.set(res.items));
this.showEditModal.set(true);
}
@@ -374,10 +384,9 @@ export class ApiDetailComponent implements OnInit, OnDestroy {
}
submitEdit() {
if (!this.editTitle().trim() || !this.editVersion().trim()) {
this.editError.set('Le titre et la version sont obligatoires.');
return;
}
this.editTitleError.set(!this.editTitle().trim());
this.editVersionError.set(!this.editVersion().trim());
if (!this.editTitle().trim() || !this.editVersion().trim()) return;
this.editLoading.set(true);
this.apiService.update(this.id, {
title: this.editTitle().trim(),