From 66fa95dabdf747b0c9e5a4b0c4796710213c6f4f Mon Sep 17 00:00:00 2001
From: Nessar <th.theophyl.hoguet@gmail.com>
Date: Fri, 24 Jul 2026 18:55:49 +0200
Subject: [PATCH] Align landlord profile validation (#47)

---
 .../in/web/landlord/LandlordProfileApi.java   |  14 +-
 .../web/landlord/LandlordProfileWebTest.java  |  56 ++++++
 .../landlord-profile-completion-dialog.html   |   2 +
 ...landlord-profile-completion-dialog.spec.ts |  37 ++++
 .../landlord-profile-completion-dialog.ts     |  21 ++-
 .../landlord-profile-form.html                |  44 ++++-
 .../landlord-profile-form.spec.ts             |  64 +++++++
 .../landlord-profile-form.ts                  | 165 ++++++++++++++++--
 .../settings-page/settings-page.html          |   2 +
 .../settings-page/settings-page.spec.ts       |  39 +++++
 .../components/settings-page/settings-page.ts |  21 ++-
 .../src/app/services/phone-number.spec.ts     |   9 +
 frontend/src/app/services/phone-number.ts     |  20 +++
 13 files changed, 462 insertions(+), 32 deletions(-)
 create mode 100644 backend/src/test/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileWebTest.java
 create mode 100644 frontend/src/app/services/phone-number.spec.ts
 create mode 100644 frontend/src/app/services/phone-number.ts

diff --git a/backend/src/main/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileApi.java b/backend/src/main/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileApi.java
index 96c9dd6..5109bcb 100644
--- a/backend/src/main/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileApi.java
+++ b/backend/src/main/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileApi.java
@@ -1,6 +1,8 @@
 package fr.nessar.lmnporganizer.rental.adapter.in.web.landlord;
 
 import fr.nessar.lmnporganizer.rental.domain.landlord.Landlord;
+import fr.nessar.lmnporganizer.rental.domain.shared.PhoneNumber;
+import jakarta.validation.constraints.AssertTrue;
 import jakarta.validation.constraints.Email;
 import jakarta.validation.constraints.NotBlank;
 
@@ -12,7 +14,17 @@ record Request(
 	@NotBlank String lastName,
 	@NotBlank @Email String email,
 	@NotBlank String phone,
-	@NotBlank String address) {}
+	@NotBlank String address) {
+	@AssertTrue
+	boolean isPhoneValid() {
+	try {
+		new PhoneNumber(phone);
+		return true;
+	} catch (IllegalArgumentException exception) {
+		return false;
+	}
+	}
+}
 
 record Response(
 	String firstName,
diff --git a/backend/src/test/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileWebTest.java b/backend/src/test/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileWebTest.java
new file mode 100644
index 0000000..2207372
--- /dev/null
+++ b/backend/src/test/java/fr/nessar/lmnporganizer/rental/adapter/in/web/landlord/LandlordProfileWebTest.java
@@ -0,0 +1,56 @@
+package fr.nessar.lmnporganizer.rental.adapter.in.web.landlord;
+
+import static org.mockito.Mockito.verifyNoInteractions;
+import static org.springframework.security.test.web.servlet.request.SecurityMockMvcRequestPostProcessors.csrf;
+import static org.springframework.security.test.web.servlet.request.SecurityMockMvcRequestPostProcessors.oidcLogin;
+import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.put;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.jsonPath;
+import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status;
+
+import fr.nessar.lmnporganizer.LmnpOrganizerApplication;
+import fr.nessar.lmnporganizer.identity.adapter.in.security.SecurityConfiguration;
+import fr.nessar.lmnporganizer.rental.adapter.in.web.common.AuthenticatedLandlord;
+import fr.nessar.lmnporganizer.rental.adapter.in.web.common.RentalApiExceptionHandler;
+import fr.nessar.lmnporganizer.rental.application.landlord.LandlordAccountService;
+import org.junit.jupiter.api.Test;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.webmvc.test.autoconfigure.WebMvcTest;
+import org.springframework.context.annotation.Import;
+import org.springframework.http.MediaType;
+import org.springframework.test.context.ContextConfiguration;
+import org.springframework.test.context.bean.override.mockito.MockitoBean;
+import org.springframework.test.web.servlet.MockMvc;
+
+@WebMvcTest(controllers = LandlordProfileController.class)
+@ContextConfiguration(classes = LmnpOrganizerApplication.class)
+@Import({AuthenticatedLandlord.class, RentalApiExceptionHandler.class, SecurityConfiguration.class})
+class LandlordProfileWebTest {
+@Autowired MockMvc mockMvc;
+
+@MockitoBean LandlordAccountService accounts;
+
+@Test
+void exposesStableValidationPathsAndCodesForProfileFields() throws Exception {
+	mockMvc
+		.perform(
+			put("/api/landlord-profile")
+				.with(oidcLogin())
+				.with(csrf())
+				.contentType(MediaType.APPLICATION_JSON)
+				.content(
+					"""
+						{"firstName":" ","lastName":" ","email":"not-an-email","phone":"1234","address":" "}
+						"""))
+		.andExpect(status().isBadRequest())
+		.andExpect(jsonPath("$.code").value("validation_failed"))
+		.andExpect(
+			jsonPath("$.errors[?(@.field == 'firstName' && @.code == 'not_blank')]").exists())
+		.andExpect(jsonPath("$.errors[?(@.field == 'lastName' && @.code == 'not_blank')]").exists())
+		.andExpect(jsonPath("$.errors[?(@.field == 'email' && @.code == 'email')]").exists())
+		.andExpect(
+			jsonPath("$.errors[?(@.field == 'phoneValid' && @.code == 'assert_true')]").exists())
+		.andExpect(jsonPath("$.errors[?(@.field == 'address' && @.code == 'not_blank')]").exists());
+
+	verifyNoInteractions(accounts);
+}
+}
diff --git a/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.html b/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.html
index ec10649..8bf6587 100644
--- a/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.html
+++ b/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.html
@@ -17,6 +17,8 @@
 			[profile]="profile()"
 			[saving]="saving()"
 			[saveError]="error()"
+			[saveFieldErrors]="saveFieldErrors()"
+			(fieldChanged)="clearSaveFieldError($event)"
 			(saveRequested)="save($event)"
 		>
 			<button
diff --git a/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.spec.ts b/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.spec.ts
index a27161e..da3f77f 100644
--- a/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.spec.ts
+++ b/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.spec.ts
@@ -101,6 +101,43 @@ describe('LandlordProfileCompletionDialog', () => {
 		expect(fixture.nativeElement.textContent).toContain('Réessayer');
 	});
 
+	it('keeps a structured save error on the field and clears it when corrected', () => {
+		profile.updateProfile.mockReturnValue(
+			throwError(
+				() =>
+					new HttpErrorResponse({
+						error: {
+							code: 'validation_failed',
+							errors: [{ field: 'phoneValid', code: 'assert_true' }],
+						},
+						status: 400,
+					}),
+			),
+		);
+		const fixture = TestBed.createComponent(LandlordProfileCompletionDialog);
+		const component = fixture.componentInstance;
+		fixture.detectChanges();
+
+		component.save({
+			firstName: 'Camille',
+			lastName: 'Martin',
+			email: 'camille@example.com',
+			phone: '1234',
+			address: '1 rue A',
+		});
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.textContent).toContain(
+			'Saisissez un numéro de téléphone valide.',
+		);
+		component.clearSaveFieldError('phone');
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.textContent).not.toContain(
+			'Saisissez un numéro de téléphone valide.',
+		);
+	});
+
 	it('retries an initial profile load without releasing the dialog', () => {
 		data.profile = null;
 		profile.getProfile.mockReturnValue(
diff --git a/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.ts b/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.ts
index 35ff4e9..f9a8a66 100644
--- a/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.ts
+++ b/frontend/src/app/components/landlord-profile-completion-dialog/landlord-profile-completion-dialog.ts
@@ -9,7 +9,7 @@ import {
 	LandlordProfileResponse,
 	LandlordProfileService,
 } from '../../services/landlord-profile.service';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { FieldValidationError, saveFailure } from '../../services/http-error-message';
 import { SessionService } from '../../services/session.service';
 
 export interface LandlordProfileCompletionDialogData {
@@ -33,6 +33,7 @@ export class LandlordProfileCompletionDialog {
 		this.data.profile ? 'ready' : 'error',
 	);
 	readonly saving = signal(false);
+	readonly saveFieldErrors = signal<FieldValidationError[]>([]);
 	readonly error = signal(
 		this.data.profile ? '' : 'Impossible de charger votre profil bailleur. Réessayez.',
 	);
@@ -63,6 +64,7 @@ export class LandlordProfileCompletionDialog {
 	save(profile: LandlordProfile): void {
 		if (this.saving()) return;
 		this.error.set('');
+		this.saveFieldErrors.set([]);
 		this.saving.set(true);
 		this.landlordProfile
 			.updateProfile(profile)
@@ -70,17 +72,24 @@ export class LandlordProfileCompletionDialog {
 			.subscribe({
 				next: () => this.dialogRef.close(),
 				error: (error: unknown) => {
-					this.error.set(
-						httpErrorMessage(
-							error,
-							'Impossible d’enregistrer votre profil bailleur. Réessayez.',
-						),
+					const failure = saveFailure(
+						error,
+						'Impossible d’enregistrer votre profil bailleur. Réessayez.',
 					);
+					this.error.set(failure.message);
+					this.saveFieldErrors.set(failure.fieldErrors);
 					this.saving.set(false);
 				},
 			});
 	}
 
+	clearSaveFieldError(field: string): void {
+		const remaining = this.saveFieldErrors().filter((error) => error.field !== field);
+		if (remaining.length === this.saveFieldErrors().length) return;
+		this.saveFieldErrors.set(remaining);
+		if (!remaining.length) this.error.set('');
+	}
+
 	logout(): void {
 		this.session.logout();
 	}
diff --git a/frontend/src/app/components/landlord-profile-form/landlord-profile-form.html b/frontend/src/app/components/landlord-profile-form/landlord-profile-form.html
index 42b91a4..748c0ed 100644
--- a/frontend/src/app/components/landlord-profile-form/landlord-profile-form.html
+++ b/frontend/src/app/components/landlord-profile-form/landlord-profile-form.html
@@ -4,8 +4,11 @@
 	(ngSubmit)="submit()"
 	[attr.aria-busy]="saving()"
 >
-	@if (error()) {
-		<p class="profile-error" role="alert">{{ error() }}</p>
+	@if (showSaveError()) {
+		<p class="profile-error" role="alert">{{ saveError() }}</p>
+	}
+	@if (validationError()) {
+		<p class="profile-error" role="alert">{{ validationError() }}</p>
 	}
 	<fieldset class="profile-fields" [disabled]="saving()" [attr.inert]="saving() ? '' : null">
 		<mat-form-field appearance="outline"
@@ -14,16 +17,26 @@
 				matInput
 				id="profile-firstName"
 				[formField]="profileForm.firstName"
+				(input)="fieldWasChanged('firstName')"
 				autocomplete="given-name"
-		/></mat-form-field>
+			/>
+			@if (firstNameError()) {
+				<mat-error>{{ firstNameError() }}</mat-error>
+			}
+		</mat-form-field>
 		<mat-form-field appearance="outline"
 			><mat-label>Nom</mat-label
 			><input
 				matInput
 				id="profile-lastName"
 				[formField]="profileForm.lastName"
+				(input)="fieldWasChanged('lastName')"
 				autocomplete="family-name"
-		/></mat-form-field>
+			/>
+			@if (lastNameError()) {
+				<mat-error>{{ lastNameError() }}</mat-error>
+			}
+		</mat-form-field>
 		<mat-form-field appearance="outline"
 			><mat-label>E-mail</mat-label
 			><input
@@ -31,8 +44,13 @@
 				id="profile-email"
 				type="email"
 				[formField]="profileForm.email"
+				(input)="fieldWasChanged('email')"
 				autocomplete="email"
-		/></mat-form-field>
+			/>
+			@if (emailError()) {
+				<mat-error>{{ emailError() }}</mat-error>
+			}
+		</mat-form-field>
 		<mat-form-field appearance="outline"
 			><mat-label>Téléphone</mat-label
 			><input
@@ -40,23 +58,33 @@
 				id="profile-phone"
 				type="tel"
 				[formField]="profileForm.phone"
+				(input)="fieldWasChanged('phone')"
 				autocomplete="tel"
-		/></mat-form-field>
+			/>
+			@if (phoneError()) {
+				<mat-error>{{ phoneError() }}</mat-error>
+			}
+		</mat-form-field>
 		<mat-form-field appearance="outline" class="full-field"
 			><mat-label>Adresse postale</mat-label
 			><input
 				matInput
 				id="profile-address"
 				[formField]="profileForm.address"
+				(input)="fieldWasChanged('address')"
 				autocomplete="street-address"
-		/></mat-form-field>
+			/>
+			@if (addressError()) {
+				<mat-error>{{ addressError() }}</mat-error>
+			}
+		</mat-form-field>
 	</fieldset>
 	<div class="profile-actions">
 		<ng-content select="[profile-form-secondary-action]" />
 		<button mat-flat-button type="submit" class="primary-action">
 			@if (saving()) {
 				<mat-spinner diameter="18" aria-hidden="true" /> Enregistrement…
-			} @else if (error()) {
+			} @else if (showSaveError()) {
 				Réessayer
 			} @else {
 				Enregistrer le profil
diff --git a/frontend/src/app/components/landlord-profile-form/landlord-profile-form.spec.ts b/frontend/src/app/components/landlord-profile-form/landlord-profile-form.spec.ts
index 2f64bf1..1ecfbf7 100644
--- a/frontend/src/app/components/landlord-profile-form/landlord-profile-form.spec.ts
+++ b/frontend/src/app/components/landlord-profile-form/landlord-profile-form.spec.ts
@@ -50,4 +50,68 @@ describe('LandlordProfileForm', () => {
 			address: '1 rue de Paris',
 		});
 	});
+
+	it('focuses and explains the first invalid field after submission', async () => {
+		const fixture = TestBed.createComponent(LandlordProfileForm);
+		const component = fixture.componentInstance;
+		const saveRequested = vi.fn();
+		component.saveRequested.subscribe(saveRequested);
+		fixture.componentRef.setInput('profile', {
+			firstName: 'Camille',
+			lastName: 'Martin',
+			email: 'camille@example.com',
+			phone: '1234',
+			address: '1 rue de Paris',
+		});
+		fixture.detectChanges();
+
+		component.submit();
+		await fixture.whenStable();
+		fixture.detectChanges();
+
+		expect(saveRequested).not.toHaveBeenCalled();
+		expect(fixture.nativeElement.textContent).toContain(
+			'Saisissez un numéro de téléphone valide.',
+		);
+		expect(document.activeElement?.id).toBe('profile-phone');
+	});
+
+	it('renders and focuses known server errors inline, then clears only the corrected field error', async () => {
+		const fixture = TestBed.createComponent(LandlordProfileForm);
+		const component = fixture.componentInstance;
+		const changed = vi.fn();
+		component.fieldChanged.subscribe(changed);
+		fixture.componentRef.setInput('profile', {
+			firstName: 'Camille',
+			lastName: 'Martin',
+			email: 'camille@example.com',
+			phone: '1234',
+			address: '1 rue de Paris',
+		});
+		fixture.componentRef.setInput('saveError', 'Veuillez corriger les champs signalés.');
+		fixture.componentRef.setInput('saveFieldErrors', [
+			{ field: 'phoneValid', code: 'assert_true' },
+		]);
+		fixture.detectChanges();
+		await fixture.whenStable();
+
+		expect(fixture.nativeElement.textContent).toContain(
+			'Saisissez un numéro de téléphone valide.',
+		);
+		expect(fixture.nativeElement.textContent).not.toContain(
+			'Veuillez corriger les champs signalés.',
+		);
+		expect(document.activeElement?.id).toBe('profile-phone');
+		const phone = fixture.nativeElement.querySelector(
+			'input#profile-phone',
+		) as HTMLInputElement;
+		phone.dispatchEvent(new Event('input'));
+
+		expect(changed).toHaveBeenCalledWith('phone');
+		fixture.componentRef.setInput('saveFieldErrors', [{ field: 'email', code: 'email' }]);
+		fixture.detectChanges();
+		await fixture.whenStable();
+
+		expect(document.activeElement?.id).toBe('profile-email');
+	});
 });
diff --git a/frontend/src/app/components/landlord-profile-form/landlord-profile-form.ts b/frontend/src/app/components/landlord-profile-form/landlord-profile-form.ts
index 696dd50..2f47c26 100644
--- a/frontend/src/app/components/landlord-profile-form/landlord-profile-form.ts
+++ b/frontend/src/app/components/landlord-profile-form/landlord-profile-form.ts
@@ -1,11 +1,13 @@
-import { Component, computed, effect, input, output, signal } from '@angular/core';
+import { Component, effect, ElementRef, inject, input, output, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { email, form, FormField, FormRoot, required } from '@angular/forms/signals';
+import { email, form, FormField, FormRoot, required, validate } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { FieldValidationError } from '../../services/http-error-message';
 import { LandlordProfile } from '../../services/landlord-profile.service';
+import { isValidPhoneNumber } from '../../services/phone-number';
 
 const EMPTY_PROFILE: LandlordProfile = {
 	firstName: '',
@@ -30,40 +32,181 @@ const EMPTY_PROFILE: LandlordProfile = {
 	styleUrl: './landlord-profile-form.css',
 })
 export class LandlordProfileForm {
+	private readonly element = inject<ElementRef<HTMLElement>>(ElementRef);
 	readonly profile = input<LandlordProfile>(EMPTY_PROFILE);
 	readonly saving = input(false);
 	readonly saveError = input('');
+	readonly saveFieldErrors = input<FieldValidationError[]>([]);
 	readonly saveRequested = output<LandlordProfile>();
+	readonly fieldChanged = output<keyof LandlordProfile>();
+	private previousServerErrorSignature = '';
 
 	readonly profileModel = signal<LandlordProfile>({ ...this.profile() });
 	readonly profileForm = form(this.profileModel, (f) => {
-		required(f.firstName, { message: 'Veuillez renseigner tous les champs obligatoires.' });
-		required(f.lastName, { message: 'Veuillez renseigner tous les champs obligatoires.' });
-		required(f.email, { message: 'Veuillez renseigner tous les champs obligatoires.' });
-		required(f.phone, { message: 'Veuillez renseigner tous les champs obligatoires.' });
-		required(f.address, { message: 'Veuillez renseigner tous les champs obligatoires.' });
+		required(f.firstName, { message: 'Le prénom est obligatoire.' });
+		required(f.lastName, { message: 'Le nom est obligatoire.' });
+		required(f.email, { message: 'L’e-mail est obligatoire.' });
+		required(f.phone, { message: 'Le numéro de téléphone est obligatoire.' });
+		required(f.address, { message: 'L’adresse postale est obligatoire.' });
 		email(f.email, { message: 'Saisissez une adresse e-mail valide.' });
+		validate(f.phone, ({ value }) =>
+			isValidPhoneNumber(value())
+				? null
+				: { kind: 'phone', message: 'Saisissez un numéro de téléphone valide.' },
+		);
 	});
-	private readonly validationError = signal('');
-	readonly error = computed(() => this.validationError() || this.saveError());
+	readonly validationError = signal('');
 
 	constructor() {
-		effect(() => this.profileModel.set({ ...this.profile() }));
+		effect(() => {
+			this.profileModel.set({ ...this.profile() });
+			this.validationError.set('');
+		});
+		effect(() => {
+			const errors = this.saveFieldErrors();
+			const signature = serverErrorSignature(errors);
+			if (signature && signature !== this.previousServerErrorSignature) {
+				queueMicrotask(() => this.focusFirstInvalid());
+			}
+			this.previousServerErrorSignature = signature;
+		});
 	}
 
 	submit(): void {
 		if (this.saving()) return;
 
 		this.profileForm().markAsTouched();
-		if (this.profileForm().invalid()) {
+		if (this.profileForm().invalid() || this.hasClientError()) {
 			this.validationError.set(
 				this.profileForm().errorSummary()[0]?.message ??
+					this.firstError() ??
 					'Saisissez des informations valides.',
 			);
+			queueMicrotask(() => this.focusFirstInvalid());
 			return;
 		}
 
 		this.validationError.set('');
 		this.saveRequested.emit(this.profileModel());
 	}
+
+	fieldWasChanged(field: keyof LandlordProfile): void {
+		this.validationError.set('');
+		this.fieldChanged.emit(field);
+	}
+
+	showSaveError(): boolean {
+		return (
+			Boolean(this.saveError()) &&
+			(this.saveFieldErrors().length === 0 ||
+				this.saveFieldErrors().some((error) => !isInlineServerError(error)))
+		);
+	}
+
+	firstNameError(): string {
+		return this.requiredError('firstName', 'Le prénom est obligatoire.');
+	}
+
+	lastNameError(): string {
+		return this.requiredError('lastName', 'Le nom est obligatoire.');
+	}
+
+	emailError(): string {
+		if (this.profileForm.email().touched() && !this.profileModel().email.trim()) {
+			return 'L’e-mail est obligatoire.';
+		}
+		if (this.profileForm.email().touched() && this.profileForm.email().invalid()) {
+			return 'Saisissez une adresse e-mail valide.';
+		}
+		return this.hasServerError('email', 'not_blank')
+			? 'L’e-mail est obligatoire.'
+			: this.hasServerError('email', 'email')
+				? 'Saisissez une adresse e-mail valide.'
+				: '';
+	}
+
+	phoneError(): string {
+		if (this.profileForm.phone().touched() && !this.profileModel().phone.trim()) {
+			return 'Le numéro de téléphone est obligatoire.';
+		}
+		if (this.profileForm.phone().touched() && !isValidPhoneNumber(this.profileModel().phone)) {
+			return 'Saisissez un numéro de téléphone valide.';
+		}
+		return this.hasServerError('phone', 'not_blank')
+			? 'Le numéro de téléphone est obligatoire.'
+			: this.hasServerError('phoneValid', 'assert_true')
+				? 'Saisissez un numéro de téléphone valide.'
+				: '';
+	}
+
+	addressError(): string {
+		return this.requiredError('address', 'L’adresse postale est obligatoire.');
+	}
+
+	private requiredError(field: 'firstName' | 'lastName' | 'address', message: string): string {
+		if (this.touched(field) && !this.profileModel()[field].trim()) return message;
+		return this.hasServerError(field, 'not_blank') ? message : '';
+	}
+
+	private touched(field: 'firstName' | 'lastName' | 'address'): boolean {
+		return this.profileForm[field]().touched();
+	}
+
+	private hasClientError(): boolean {
+		return Boolean(
+			this.firstNameError() ||
+			this.lastNameError() ||
+			this.emailError() ||
+			this.phoneError() ||
+			this.addressError(),
+		);
+	}
+
+	private firstError(): string {
+		return (
+			this.firstNameError() ||
+			this.lastNameError() ||
+			this.emailError() ||
+			this.phoneError() ||
+			this.addressError()
+		);
+	}
+
+	private hasServerError(field: string, code: string): boolean {
+		return this.saveFieldErrors().some((error) => error.field === field && error.code === code);
+	}
+
+	private focusFirstInvalid(): void {
+		if (!this.element.nativeElement.querySelector('form')) return;
+		const selector = this.firstNameError()
+			? '#profile-firstName'
+			: this.lastNameError()
+				? '#profile-lastName'
+				: this.emailError()
+					? '#profile-email'
+					: this.phoneError()
+						? '#profile-phone'
+						: this.addressError()
+							? '#profile-address'
+							: '';
+		const control = this.element.nativeElement.querySelector(selector);
+		if (control instanceof HTMLElement) control.focus();
+	}
+}
+
+function isInlineServerError(error: FieldValidationError): boolean {
+	return (
+		((error.field === 'firstName' || error.field === 'lastName' || error.field === 'address') &&
+			error.code === 'not_blank') ||
+		(error.field === 'email' && (error.code === 'not_blank' || error.code === 'email')) ||
+		(error.field === 'phone' && error.code === 'not_blank') ||
+		(error.field === 'phoneValid' && error.code === 'assert_true')
+	);
+}
+
+function serverErrorSignature(errors: FieldValidationError[]): string {
+	return errors
+		.map((error) => `${error.field}:${error.code}`)
+		.sort()
+		.join('|');
 }
diff --git a/frontend/src/app/components/settings-page/settings-page.html b/frontend/src/app/components/settings-page/settings-page.html
index 41d10fd..3ff9882 100644
--- a/frontend/src/app/components/settings-page/settings-page.html
+++ b/frontend/src/app/components/settings-page/settings-page.html
@@ -69,6 +69,8 @@
 					[profile]="profileModel()"
 					[saving]="saving()"
 					[saveError]="saveError()"
+					[saveFieldErrors]="saveFieldErrors()"
+					(fieldChanged)="clearSaveFieldError($event)"
 					(saveRequested)="save($event)"
 				/>
 			}
diff --git a/frontend/src/app/components/settings-page/settings-page.spec.ts b/frontend/src/app/components/settings-page/settings-page.spec.ts
index 16e53c0..03eb478 100644
--- a/frontend/src/app/components/settings-page/settings-page.spec.ts
+++ b/frontend/src/app/components/settings-page/settings-page.spec.ts
@@ -97,4 +97,43 @@ describe('SettingsPage', () => {
 			'alex@example.com',
 		);
 	});
+
+	it('keeps structured profile errors beside their field until that field changes', async () => {
+		profile.updateProfile.mockReturnValue(
+			throwError(
+				() =>
+					new HttpErrorResponse({
+						error: {
+							code: 'validation_failed',
+							errors: [{ field: 'phoneValid', code: 'assert_true' }],
+						},
+						status: 400,
+					}),
+			),
+		);
+		const fixture = TestBed.createComponent(SettingsPage);
+		fixture.detectChanges();
+		await fixture.whenStable();
+
+		fixture.nativeElement.querySelector('button.primary-action').click();
+		fixture.detectChanges();
+		await fixture.whenStable();
+
+		expect(fixture.nativeElement.textContent).toContain(
+			'Saisissez un numéro de téléphone valide.',
+		);
+		expect(fixture.nativeElement.textContent).not.toContain(
+			'Veuillez corriger les champs signalés.',
+		);
+		const phone = fixture.nativeElement.querySelector(
+			'input#profile-phone',
+		) as HTMLInputElement;
+		phone.value = '+33612345678';
+		phone.dispatchEvent(new Event('input'));
+		fixture.detectChanges();
+
+		expect(fixture.nativeElement.textContent).not.toContain(
+			'Saisissez un numéro de téléphone valide.',
+		);
+	});
 });
diff --git a/frontend/src/app/components/settings-page/settings-page.ts b/frontend/src/app/components/settings-page/settings-page.ts
index abdfb29..807e628 100644
--- a/frontend/src/app/components/settings-page/settings-page.ts
+++ b/frontend/src/app/components/settings-page/settings-page.ts
@@ -6,7 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatRadioModule } from '@angular/material/radio';
 import { LandlordProfileForm } from '../landlord-profile-form/landlord-profile-form';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { FieldValidationError, saveFailure } from '../../services/http-error-message';
 import { LandlordProfile, LandlordProfileService } from '../../services/landlord-profile.service';
 import { SessionService } from '../../services/session.service';
 import { ThemeService } from '../../services/theme.service';
@@ -45,6 +45,7 @@ export class SettingsPage {
 
 	readonly profileError = signal('');
 	readonly saveError = signal('');
+	readonly saveFieldErrors = signal<FieldValidationError[]>([]);
 	readonly saveSuccess = signal('');
 
 	constructor() {
@@ -79,6 +80,7 @@ export class SettingsPage {
 		if (this.saving()) return;
 		this.saveSuccess.set('');
 		this.saveError.set('');
+		this.saveFieldErrors.set([]);
 		this.saving.set(true);
 		this.landlordProfile
 			.updateProfile(profile)
@@ -90,14 +92,21 @@ export class SettingsPage {
 					this.saving.set(false);
 				},
 				error: (error: unknown) => {
-					this.saveError.set(
-						httpErrorMessage(
-							error,
-							'Impossible d’enregistrer votre profil bailleur. Réessayez.',
-						),
+					const failure = saveFailure(
+						error,
+						'Impossible d’enregistrer votre profil bailleur. Réessayez.',
 					);
+					this.saveError.set(failure.message);
+					this.saveFieldErrors.set(failure.fieldErrors);
 					this.saving.set(false);
 				},
 			});
 	}
+
+	clearSaveFieldError(field: string): void {
+		const remaining = this.saveFieldErrors().filter((error) => error.field !== field);
+		if (remaining.length === this.saveFieldErrors().length) return;
+		this.saveFieldErrors.set(remaining);
+		if (!remaining.length) this.saveError.set('');
+	}
 }
diff --git a/frontend/src/app/services/phone-number.spec.ts b/frontend/src/app/services/phone-number.spec.ts
new file mode 100644
index 0000000..2c140bc
--- /dev/null
+++ b/frontend/src/app/services/phone-number.spec.ts
@@ -0,0 +1,9 @@
+import { isValidPhoneNumber } from './phone-number';
+
+describe('isValidPhoneNumber', () => {
+	it('accepts the formats normalized by the backend and rejects malformed numbers', () => {
+		expect(isValidPhoneNumber('06 12 34 56 78')).toBe(true);
+		expect(isValidPhoneNumber('0033 (6) 12-34-56-78')).toBe(true);
+		expect(isValidPhoneNumber('1234')).toBe(false);
+	});
+});
diff --git a/frontend/src/app/services/phone-number.ts b/frontend/src/app/services/phone-number.ts
new file mode 100644
index 0000000..a5a7e92
--- /dev/null
+++ b/frontend/src/app/services/phone-number.ts
@@ -0,0 +1,20 @@
+export function isValidPhoneNumber(value: string): boolean {
+	let compact = '';
+	for (const character of value.trim()) {
+		if (!' \t\n\r()./-'.includes(character)) compact += character;
+	}
+	if (!compact) return true;
+	if (compact.length === 10 && compact[0] === '0' && digits(compact, 0)) return true;
+	if (compact.startsWith('00')) compact = `+${compact.slice(2)}`;
+	return (
+		compact.startsWith('+') && compact.length >= 9 && compact.length <= 16 && digits(compact, 1)
+	);
+}
+
+function digits(value: string, start: number): boolean {
+	for (let index = start; index < value.length; index += 1) {
+		const character = value.charCodeAt(index);
+		if (character < 48 || character > 57) return false;
+	}
+	return true;
+}