Align rent revision validation flows (#56)

frontend/src/app/components/rent-revision-application/rent-revision-application.css

@@ -61,6 +61,10 @@ input[type='file'] {
 	color: var(--danger, #b42318);
 }
 
+.field-error {
+	color: var(--danger, #b42318);
+}
+
 .apply-submit {
 	justify-self: start;
 }

frontend/src/app/components/rent-revision-application/rent-revision-application.html

@@ -13,29 +13,43 @@
 		<fieldset [disabled]="pending()">
 			<label>
 				<span>Mode d’envoi</span>
-				<select class="delivery-method" [formField]="applicationForm.deliveryMethod">
+				<select
+					class="delivery-method"
+					[formField]="applicationForm.deliveryMethod"
+					(change)="clearFieldError('deliveryMethod')"
+				>
 					<option value="">Choisissez un mode</option>
 					@for (method of deliveryMethods; track method.value) {
 						<option [value]="method.value">{{ method.label }}</option>
 					}
 				</select>
+				@if (fieldError('deliveryMethod')) {
+					<small class="field-error">{{ fieldError('deliveryMethod') }}</small>
+				}
 			</label>
 			<label>
 				<span>Preuve d’envoi PDF (facultative)</span>
 				<input type="file" accept="application/pdf,.pdf" (change)="selectProof($event)" />
 				<small>{{ proof()?.name ?? 'Aucun fichier sélectionné' }}</small>
+				@if (fieldError('proof')) {
+					<small class="field-error">{{ fieldError('proof') }}</small>
+				}
 			</label>
 			<label class="attestation">
 				<input
 					class="delivery-confirmed"
 					type="checkbox"
 					[formField]="applicationForm.deliveryConfirmed"
+					(change)="clearFieldError('deliveryConfirmed')"
 				/>
 				<span>
 					J’atteste avoir envoyé cette lettre selon le mode indiqué et avoir vérifié sa
 					prise d’effet prévue le {{ civilDate(revision().effectiveOn) }}.
 				</span>
 			</label>
+			@if (fieldError('deliveryConfirmed')) {
+				<small class="field-error">{{ fieldError('deliveryConfirmed') }}</small>
+			}
 			@if (validationError() || error()) {
 				<p class="operation-error" role="alert">{{ validationError() || error() }}</p>
 			}

frontend/src/app/components/rent-revision-application/rent-revision-application.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, input, output, signal } from '@angular/core';
+import { Component, DestroyRef, ElementRef, inject, input, output, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { FormField, FormRoot, form } from '@angular/forms/signals';
@@ -10,7 +10,7 @@ import {
 	RentRevisionDeliveryMethod,
 	RentRevisionResponse,
 } from '../../services/lease.service';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { FieldValidationError, saveFailure } from '../../services/http-error-message';
 
 const frenchDate = new Intl.DateTimeFormat('fr-FR', {
 	day: 'numeric',
@@ -28,6 +28,7 @@ const frenchDate = new Intl.DateTimeFormat('fr-FR', {
 export class RentRevisionApplicationComponent {
 	private readonly leases = inject(LeaseService);
 	private readonly destroyRef = inject(DestroyRef);
+	private readonly host = inject(ElementRef<HTMLElement>);
 
 	readonly leaseId = input.required<string>();
 	readonly revision = input.required<RentRevisionResponse>();
@@ -41,6 +42,7 @@ export class RentRevisionApplicationComponent {
 	readonly pending = signal(false);
 	readonly validationError = signal('');
 	readonly error = signal('');
+	readonly fieldErrors = signal<FieldValidationError[]>([]);
 	readonly deliveryMethods = [
 		{ value: 'REGISTERED_LETTER', label: 'Lettre recommandée' },
 		{ value: 'POSTAL_LETTER', label: 'Lettre postale' },
@@ -65,6 +67,7 @@ export class RentRevisionApplicationComponent {
 		this.pending.set(true);
 		this.validationError.set('');
 		this.error.set('');
+		this.fieldErrors.set([]);
 		const proof = this.proof();
 		this.leases
 			.applyRentRevision(this.leaseId(), this.revision().id, {
@@ -80,14 +83,45 @@ export class RentRevisionApplicationComponent {
 			)
 			.subscribe({
 				next: (response) => this.applied.emit(response),
-				error: (error: unknown) =>
+				error: (error: unknown) => {
+					const failure = saveFailure(
+						error,
+						'Impossible d’appliquer cette révision de loyer.',
+					);
+					const visibleErrors = failure.fieldErrors.filter((fieldError) =>
+						this.isKnownField(fieldError.field),
+					);
+					this.fieldErrors.set(visibleErrors);
 					this.error.set(
-						httpErrorMessage(error, 'Impossible d’appliquer cette révision de loyer.'),
-					),
+						visibleErrors.length === failure.fieldErrors.length
+							? failure.message
+							: this.operationError(failure.fieldErrors),
+					);
+					this.focusFirstFieldError();
+				},
 			});
 	}
 
+	clearFieldError(field: string): void {
+		if (!this.fieldErrors().some((error) => error.field === field)) return;
+		const remaining = this.fieldErrors().filter((error) => error.field !== field);
+		this.fieldErrors.set(remaining);
+		if (remaining.length === 0) this.error.set('');
+	}
+
+	fieldError(field: string): string {
+		if (!this.fieldErrors().some((error) => error.field === field)) return '';
+		return (
+			{
+				deliveryMethod: 'Choisissez un mode d’envoi valide.',
+				deliveryConfirmed: 'Confirmez l’envoi de la lettre.',
+				proof: 'Choisissez une preuve PDF lisible.',
+			}[field] ?? 'Vérifiez cette valeur.'
+		);
+	}
+
 	selectProof(event: Event): void {
+		this.clearFieldError('proof');
 		const input = event.target;
 		const file = input instanceof HTMLInputElement ? (input.files?.item(0) ?? null) : null;
 		if (file && file.name.toLowerCase().endsWith('.pdf') && file.type === 'application/pdf') {
@@ -104,4 +138,33 @@ export class RentRevisionApplicationComponent {
 		const [year, month, day] = date.split('-').map(Number);
 		return frenchDate.format(new Date(Date.UTC(year, month - 1, day)));
 	}
+
+	private isKnownField(field: string): boolean {
+		return ['deliveryMethod', 'deliveryConfirmed', 'proof'].includes(field);
+	}
+
+	private operationError(errors: FieldValidationError[]): string {
+		return errors.some((error) => error.field === 'sentOn')
+			? 'La date d’envoi de cette proposition est invalide.'
+			: errors.some((error) => error.field === 'timeZone')
+				? 'Le fuseau horaire du navigateur est invalide.'
+				: 'Impossible d’appliquer cette révision de loyer.';
+	}
+
+	private focusFirstFieldError(): void {
+		const selector = this.fieldErrors()
+			.map(
+				(error) =>
+					({
+						deliveryMethod: '.delivery-method',
+						deliveryConfirmed: '.delivery-confirmed',
+						proof: 'input[type=file]',
+					})[error.field],
+			)
+			.find((value): value is string => typeof value === 'string');
+		if (selector)
+			queueMicrotask(() =>
+				(this.host.nativeElement.querySelector(selector) as HTMLElement | null)?.focus(),
+			);
+	}
 }

frontend/src/app/components/rent-revision-preview/rent-revision-preview.css

@@ -108,6 +108,12 @@ input[type='number'] {
 	color: var(--danger, #b42318);
 }
 
+.field-error,
+.stale-preview {
+	color: var(--danger, #b42318);
+	font-size: 0.75rem;
+}
+
 .preview-warnings ul {
 	display: grid;
 	gap: var(--space-2, 0.5rem);

frontend/src/app/components/rent-revision-preview/rent-revision-preview.html

@@ -17,7 +17,11 @@
 				<summary>Changer la série INSEE</summary>
 				<label>
 					<span>Nouvelle série officielle</span>
-					<select class="series-override" [formField]="requestForm.seriesIdOverride">
+					<select
+						class="series-override"
+						[formField]="requestForm.seriesIdOverride"
+						(change)="onSeriesChanged()"
+					>
 						<option value="">Série prévue dans le bail</option>
 						<option value="001515333">Métropole — 001515333</option>
 						<option value="010760507">Corse — 010760507</option>
@@ -25,6 +29,9 @@
 							Départements d’outre-mer (article 73) — 010760509
 						</option>
 					</select>
+					@if (fieldError('seriesIdOverride')) {
+						<small class="field-error">{{ fieldError('seriesIdOverride') }}</small>
+					}
 				</label>
 				@if (requestModel().seriesIdOverride.trim()) {
 					<label class="attestation">
@@ -47,18 +54,26 @@
 							<input
 								class="previous-index"
 								type="number"
-								step="0.01"
+								step="0.0001"
+								(input)="clearFieldError('previousIndex')"
 								[formField]="requestForm.previousIndex"
 							/>
+							@if (fieldError('previousIndex')) {
+								<small class="field-error">{{ fieldError('previousIndex') }}</small>
+							}
 						</label>
 						<label>
 							<span>Nouvel indice</span>
 							<input
 								class="new-index"
 								type="number"
-								step="0.01"
+								step="0.0001"
+								(input)="clearFieldError('newIndex')"
 								[formField]="requestForm.newIndex"
 							/>
+							@if (fieldError('newIndex')) {
+								<small class="field-error">{{ fieldError('newIndex') }}</small>
+							}
 						</label>
 					</div>
 					<label class="attestation">
@@ -164,10 +179,17 @@
 			}
 		</article>
 	}
+	@if (preview() && !previewActionable()) {
+		<p class="stale-preview" role="status">
+			Cette simulation est conservée pour référence, mais doit être recalculée avant toute
+			proposition.
+		</p>
+	}
 
 	<app-rent-revision-proposals
 		[leaseId]="leaseId()"
 		[preview]="preview()"
 		[previewRequest]="lastSuccessfulRequest()"
+		[previewActionable]="previewActionable()"
 	/>
 </section>

frontend/src/app/components/rent-revision-preview/rent-revision-preview.spec.ts

@@ -114,8 +114,8 @@ describe('RentRevisionPreviewComponent', () => {
 
 		const previous: HTMLInputElement = fixture.nativeElement.querySelector('.previous-index');
 		const next: HTMLInputElement = fixture.nativeElement.querySelector('.new-index');
-		expect(previous.min).toBe('0.01');
-		expect(next.min).toBe('0.01');
+		expect(previous.min).toBe('0.0001');
+		expect(next.min).toBe('0.0001');
 		previous.value = '145.17';
 		previous.dispatchEvent(new Event('input'));
 		next.value = '146.68';
@@ -202,7 +202,7 @@ describe('RentRevisionPreviewComponent', () => {
 		http.expectOne('/api/leases/lease-1/rent-revisions/preview').flush({});
 	});
 
-	it('does not leave a previous simulation actionable after a recalculation failure', () => {
+	it('preserves a previous simulation but disables its stale proposal after a recalculation failure', () => {
 		const fixture = createComponent();
 		fixture.nativeElement.querySelector('.preview-submit').click();
 		http.expectOne('/api/leases/lease-1/rent-revisions/preview').flush(previewResponse());
@@ -216,8 +216,11 @@ describe('RentRevisionPreviewComponent', () => {
 		);
 		fixture.detectChanges();
 
-		expect(fixture.nativeElement.querySelector('.preview-result')).toBeNull();
+		expect(fixture.nativeElement.querySelector('.preview-result')).not.toBeNull();
 		expect(fixture.nativeElement.querySelector('.proposal-form')).toBeNull();
+		expect(fixture.nativeElement.textContent).toContain(
+			'doit être recalculée avant toute proposition',
+		);
 		expect(fixture.nativeElement.textContent).toContain('Recalcul impossible');
 	});
 });

frontend/src/app/components/rent-revision-preview/rent-revision-preview.ts

@@ -1,4 +1,4 @@
-import { Component, DestroyRef, inject, input, signal } from '@angular/core';
+import { Component, DestroyRef, ElementRef, inject, input, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 import { FormField, FormRoot, form, min } from '@angular/forms/signals';
@@ -9,7 +9,7 @@ import {
 	RentRevisionPreview,
 	RentRevisionPreviewRequest,
 } from '../../services/lease.service';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { FieldValidationError, saveFailure } from '../../services/http-error-message';
 import { leaseWarningDescription } from '../../services/lease-warning-label';
 import { RentRevisionProposalsComponent } from '../rent-revision-proposals/rent-revision-proposals';
 
@@ -36,13 +36,16 @@ const indexFormatter = new Intl.NumberFormat('fr-FR', { maximumFractionDigits: 4
 export class RentRevisionPreviewComponent {
 	private readonly leases = inject(LeaseService);
 	private readonly destroyRef = inject(DestroyRef);
+	private readonly host = inject(ElementRef<HTMLElement>);
 
 	readonly leaseId = input.required<string>();
 	readonly preview = signal<RentRevisionPreview | null>(null);
 	readonly pending = signal(false);
 	readonly error = signal('');
+	readonly fieldErrors = signal<FieldValidationError[]>([]);
 	readonly validationError = signal('');
 	readonly manualRequired = signal(false);
+	readonly previewActionable = signal(false);
 	readonly lastSuccessfulRequest = signal<RentRevisionPreviewRequest | null>(null);
 	readonly requestModel = signal({
 		seriesIdOverride: '',
@@ -52,18 +55,18 @@ export class RentRevisionPreviewComponent {
 		manualIndicesConfirmed: false,
 	});
 	readonly requestForm = form(this.requestModel, (fields) => {
-		min(fields.previousIndex, 0.01);
-		min(fields.newIndex, 0.01);
+		min(fields.previousIndex, 0.0001);
+		min(fields.newIndex, 0.0001);
 	});
 
 	prepare(): void {
 		if (this.pending()) return;
 		const request = this.buildRequest();
 		if (!request) return;
-		this.preview.set(null);
-		this.lastSuccessfulRequest.set(null);
+		this.previewActionable.set(false);
 		this.pending.set(true);
 		this.error.set('');
+		this.fieldErrors.set([]);
 		this.validationError.set('');
 		this.leases
 			.previewRentRevision(this.leaseId(), request)
@@ -75,17 +78,69 @@ export class RentRevisionPreviewComponent {
 				next: (preview) => {
 					this.preview.set(preview);
 					this.lastSuccessfulRequest.set(request);
+					this.previewActionable.set(true);
+					if (this.manualRequired() && preview.indexSource !== 'MANUAL') {
+						this.clearManualIndices();
+					}
 					this.manualRequired.set(preview.indexSource === 'MANUAL');
 				},
 				error: (error: unknown) => {
-					if (this.isIndexUnavailable(error)) this.manualRequired.set(true);
-					this.error.set(
-						httpErrorMessage(error, 'Impossible de préparer la révision du loyer.'),
+					if (this.isIndexUnavailable(error)) {
+						if (!this.manualRequired()) this.clearManualIndices();
+						this.manualRequired.set(true);
+						this.error.set(
+							'Les indices IRL officiels sont indisponibles. Saisissez-les manuellement après vérification.',
+						);
+						return;
+					}
+					const failure = saveFailure(
+						error,
+						'Impossible de préparer la révision du loyer.',
 					);
+					const visibleErrors = failure.fieldErrors.filter((fieldError) =>
+						this.isKnownField(fieldError.field),
+					);
+					this.fieldErrors.set(visibleErrors);
+					this.error.set(
+						visibleErrors.length === failure.fieldErrors.length
+							? failure.message
+							: this.operationError(failure.fieldErrors),
+					);
+					this.focusFirstFieldError();
 				},
 			});
 	}
 
+	clearFieldError(field: string): void {
+		if (!this.fieldErrors().some((error) => error.field === field)) return;
+		const remaining = this.fieldErrors().filter((error) => error.field !== field);
+		this.fieldErrors.set(remaining);
+		if (remaining.length === 0) this.error.set('');
+	}
+
+	onSeriesChanged(): void {
+		this.clearFieldError('seriesIdOverride');
+		this.requestModel.update((model) => ({
+			...model,
+			seriesOverrideConfirmed: false,
+			previousIndex: null,
+			newIndex: null,
+			manualIndicesConfirmed: false,
+		}));
+	}
+
+	fieldError(field: string): string {
+		if (!this.fieldErrors().some((error) => error.field === field)) return '';
+		return (
+			{
+				timeZone: 'Le fuseau horaire du navigateur est invalide.',
+				seriesIdOverride: 'Choisissez une série IRL officielle prise en charge.',
+				previousIndex: 'Renseignez un indice précédent strictement positif.',
+				newIndex: 'Renseignez un nouvel indice strictement positif.',
+			}[field] ?? 'Vérifiez cette valeur.'
+		);
+	}
+
 	civilDate(date: string): string {
 		const [year, month, day] = date.split('-').map(Number);
 		return civilDateFormatter.format(new Date(Date.UTC(year, month - 1, day)));
@@ -159,4 +214,40 @@ export class RentRevisionPreviewComponent {
 			error.error.code === 'IRL_INDEX_UNAVAILABLE'
 		);
 	}
+
+	private isKnownField(field: string): boolean {
+		return ['timeZone', 'seriesIdOverride', 'previousIndex', 'newIndex'].includes(field);
+	}
+
+	private operationError(errors: FieldValidationError[]): string {
+		return errors.some((error) => error.field === 'timeZone')
+			? 'Le fuseau horaire du navigateur est invalide.'
+			: 'Impossible de préparer la révision du loyer.';
+	}
+
+	private focusFirstFieldError(): void {
+		const selector = this.fieldErrors()
+			.map(
+				(error) =>
+					({
+						seriesIdOverride: '.series-override',
+						previousIndex: '.previous-index',
+						newIndex: '.new-index',
+					})[error.field],
+			)
+			.find((value): value is string => typeof value === 'string');
+		if (selector)
+			queueMicrotask(() =>
+				(this.host.nativeElement.querySelector(selector) as HTMLElement | null)?.focus(),
+			);
+	}
+
+	private clearManualIndices(): void {
+		this.requestModel.update((model) => ({
+			...model,
+			previousIndex: null,
+			newIndex: null,
+			manualIndicesConfirmed: false,
+		}));
+	}
 }

frontend/src/app/components/rent-revision-proposals/rent-revision-history.state.ts

@@ -2,7 +2,7 @@ import { DestroyRef, inject, Injectable, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { finalize } from 'rxjs';
 import { FileDownloadService } from '../../services/file-download.service';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { saveFailure } from '../../services/http-error-message';
 import {
 	ApplyRentRevisionResponse,
 	LeaseService,
@@ -41,10 +41,8 @@ export class RentRevisionHistoryState {
 				error: (error: unknown) => {
 					if (requestId === this.requestId) {
 						this.error.set(
-							httpErrorMessage(
-								error,
-								'Impossible de charger les révisions de loyer.',
-							),
+							saveFailure(error, 'Impossible de charger les révisions de loyer.')
+								.message,
 						);
 					}
 				},

frontend/src/app/components/rent-revision-proposals/rent-revision-proposals.css

@@ -127,6 +127,11 @@
 	color: var(--danger, #b42318);
 }
 
+.field-error {
+	color: var(--danger, #b42318);
+	font-size: 0.75rem;
+}
+
 .proposal-submit {
 	justify-self: start;
 }

frontend/src/app/components/rent-revision-proposals/rent-revision-proposals.html

@@ -1,6 +1,10 @@
 <section class="rent-revision-proposals" aria-label="Propositions de révision du loyer">
 	@if (preview(); as currentPreview) {
-		@if (previewRevisionApplied()) {
+		@if (!previewActionable()) {
+			<p class="window-notice" role="status">
+				Recalculez la simulation avant de créer une proposition.
+			</p>
+		} @else if (previewRevisionApplied()) {
 			<p class="window-notice applied-anniversary" role="status">
 				Une révision a déjà été appliquée pour cet anniversaire.
 			</p>
@@ -24,7 +28,11 @@
 								type="date"
 								class="requested-on"
 								[formField]="proposalForm.requestedOn"
+								(input)="clearFieldError('requestedOn')"
 							/>
+							@if (fieldError('requestedOn')) {
+								<small class="field-error">{{ fieldError('requestedOn') }}</small>
+							}
 						</label>
 						<label>
 							<span>Nouveau loyer choisi</span>
@@ -33,7 +41,11 @@
 								step="0.01"
 								class="chosen-rent"
 								[formField]="proposalForm.chosenRent"
+								(input)="clearFieldError('chosenRent')"
 							/>
+							@if (fieldError('chosenRent')) {
+								<small class="field-error">{{ fieldError('chosenRent') }}</small>
+							}
 						</label>
 						@if (currentPreview.chargeCeiling !== null) {
 							<label>
@@ -43,7 +55,13 @@
 									step="0.01"
 									class="chosen-charges"
 									[formField]="proposalForm.chosenCharges"
+									(input)="clearFieldError('chosenCharges')"
 								/>
+								@if (fieldError('chosenCharges')) {
+									<small class="field-error">{{
+										fieldError('chosenCharges')
+									}}</small>
+								}
 							</label>
 						}
 					</div>
@@ -71,10 +89,14 @@
 									</span>
 								</label>
 							}
+							@if (fieldError('confirmedWarningCodes')) {
+								<p class="field-error">{{ fieldError('confirmedWarningCodes') }}</p>
+							}
 						</div>
 					}
 					<p class="recalculation-notice">
-						Le serveur recalculera les indices et plafonds avant de figer la lettre.
+						Le serveur recalculera la série, la période de référence, les indices et les
+						plafonds avant de figer la lettre.
 					</p>
 					@if (validationError() || createError()) {
 						<p class="operation-error" role="alert">

frontend/src/app/components/rent-revision-proposals/rent-revision-proposals.spec.ts

@@ -106,6 +106,7 @@ describe('RentRevisionProposalsComponent', () => {
 		if (withPreview) {
 			fixture.componentRef.setInput('preview', preview);
 			fixture.componentRef.setInput('previewRequest', previewRequest);
+			fixture.componentRef.setInput('previewActionable', true);
 		}
 		fixture.detectChanges();
 		return fixture;

frontend/src/app/components/rent-revision-proposals/rent-revision-proposals.ts

@@ -1,10 +1,19 @@
-import { Component, computed, DestroyRef, effect, inject, input, signal } from '@angular/core';
+import {
+	Component,
+	computed,
+	DestroyRef,
+	ElementRef,
+	effect,
+	inject,
+	input,
+	signal,
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
-import { FormField, FormRoot, form, min } from '@angular/forms/signals';
+import { FormField, FormRoot, form, max, min } from '@angular/forms/signals';
 import { MatButtonModule } from '@angular/material/button';
 import { finalize } from 'rxjs';
-import { httpErrorMessage } from '../../services/http-error-message';
+import { FieldValidationError, saveFailure } from '../../services/http-error-message';
 import {
 	LeaseService,
 	RentRevisionDeliveryMethod,
@@ -40,13 +49,16 @@ const euro = new Intl.NumberFormat('fr-FR', {
 export class RentRevisionProposalsComponent {
 	private readonly leases = inject(LeaseService);
 	private readonly destroyRef = inject(DestroyRef);
+	private readonly host = inject(ElementRef<HTMLElement>);
 
 	readonly history = inject(RentRevisionHistoryState);
 	readonly leaseId = input.required<string>();
 	readonly preview = input<RentRevisionPreview | null>(null);
 	readonly previewRequest = input<RentRevisionPreviewRequest | null>(null);
+	readonly previewActionable = input(false);
 	readonly creating = signal(false);
 	readonly createError = signal('');
+	readonly fieldErrors = signal<FieldValidationError[]>([]);
 	readonly validationError = signal('');
 	readonly confirmedWarningCodes = signal<ReadonlySet<string>>(new Set());
 	readonly proposalModel = signal({
@@ -55,8 +67,10 @@ export class RentRevisionProposalsComponent {
 		chosenCharges: null as number | null,
 	});
 	readonly proposalForm = form(this.proposalModel, (fields) => {
-		min(fields.chosenRent, 0.01);
-		min(fields.chosenCharges, 0.01);
+		min(fields.chosenRent, () => this.preview()?.previousRent);
+		max(fields.chosenRent, () => this.preview()?.rentCeiling);
+		min(fields.chosenCharges, () => this.preview()?.previousCharges);
+		max(fields.chosenCharges, () => this.preview()?.chargeCeiling ?? undefined);
 	});
 	readonly previewRevisionApplied = computed(() => {
 		const preview = this.preview();
@@ -90,6 +104,7 @@ export class RentRevisionProposalsComponent {
 			this.confirmedWarningCodes.set(new Set());
 			this.validationError.set('');
 			this.createError.set('');
+			this.fieldErrors.set([]);
 		});
 	}
 
@@ -102,6 +117,7 @@ export class RentRevisionProposalsComponent {
 			!previewRequest ||
 			this.history.loading() ||
 			this.history.error() ||
+			!this.previewActionable() ||
 			this.previewRevisionApplied() ||
 			this.proposalWindowIssue()
 		)
@@ -127,6 +143,7 @@ export class RentRevisionProposalsComponent {
 		this.creating.set(true);
 		this.validationError.set('');
 		this.createError.set('');
+		this.fieldErrors.set([]);
 		this.leases
 			.createRentRevision(this.leaseId(), request)
 			.pipe(
@@ -135,17 +152,46 @@ export class RentRevisionProposalsComponent {
 			)
 			.subscribe({
 				next: (revision) => this.history.prepend(revision),
-				error: (error: unknown) =>
+				error: (error: unknown) => {
+					const failure = saveFailure(
+						error,
+						'Impossible de créer cette proposition de révision.',
+					);
+					const visibleErrors = failure.fieldErrors.filter((fieldError) =>
+						this.isKnownField(fieldError.field),
+					);
+					this.fieldErrors.set(visibleErrors);
 					this.createError.set(
-						httpErrorMessage(
-							error,
-							'Impossible de créer cette proposition de révision.',
-						),
-					),
+						visibleErrors.length === failure.fieldErrors.length
+							? failure.message
+							: 'Impossible de créer cette proposition de révision.',
+					);
+					this.focusFirstFieldError();
+				},
 			});
 	}
 
+	clearFieldError(field: string): void {
+		if (!this.fieldErrors().some((error) => error.field === field)) return;
+		const remaining = this.fieldErrors().filter((error) => error.field !== field);
+		this.fieldErrors.set(remaining);
+		if (remaining.length === 0) this.createError.set('');
+	}
+
+	fieldError(field: string): string {
+		if (!this.fieldErrors().some((error) => error.field === field)) return '';
+		return (
+			{
+				requestedOn: 'Renseignez une date de demande valide.',
+				chosenRent: 'Renseignez un nouveau loyer strictement positif.',
+				chosenCharges: 'Renseignez des charges positives ou nulles.',
+				confirmedWarningCodes: 'Confirmez chaque avertissement affiché.',
+			}[field] ?? 'Vérifiez cette valeur.'
+		);
+	}
+
 	setWarning(code: string, checked: boolean): void {
+		this.clearFieldError('confirmedWarningCodes');
 		this.confirmedWarningCodes.update((codes) => {
 			const next = new Set(codes);
 			if (checked) next.add(code);
@@ -241,4 +287,28 @@ export class RentRevisionProposalsComponent {
 			parts.find((part) => part.type === type)?.value ?? '';
 		return `${value('year')}-${value('month')}-${value('day')}`;
 	}
+
+	private isKnownField(field: string): boolean {
+		return ['requestedOn', 'chosenRent', 'chosenCharges', 'confirmedWarningCodes'].includes(
+			field,
+		);
+	}
+
+	private focusFirstFieldError(): void {
+		const selector = this.fieldErrors()
+			.map(
+				(error) =>
+					({
+						requestedOn: '.requested-on',
+						chosenRent: '.chosen-rent',
+						chosenCharges: '.chosen-charges',
+						confirmedWarningCodes: '.proposal-warning',
+					})[error.field],
+			)
+			.find((value): value is string => typeof value === 'string');
+		if (selector)
+			queueMicrotask(() =>
+				(this.host.nativeElement.querySelector(selector) as HTMLElement | null)?.focus(),
+			);
+	}
 }