Align nested lease validation flows (#50)

frontend/src/app/components/lease-clause-editor/lease-clause-editor.html

@@ -23,15 +23,26 @@
 					<mat-checkbox
 						[checked]="isSelected(definition.id)"
 						(change)="toggleCatalog(definition.id, $event.checked)"
+						[attr.data-clause-invalid]="catalogError(definition.id) ? 'true' : null"
 					>
 						{{ definition.label }}
 					</mat-checkbox>
 					<p>{{ definition.description }}</p>
+					@if (catalogError(definition.id)) {
+						<p class="alert-error" data-clause-invalid="true" tabindex="-1">
+							{{ catalogError(definition.id) }}
+						</p>
+					}
 
 					@if (isSelected(definition.id) && definition.parameters.length) {
 						<div class="parameter-grid">
 							@for (parameter of definition.parameters; track parameter.name) {
-								<mat-form-field appearance="outline">
+								<mat-form-field
+									appearance="outline"
+									[attr.data-clause-invalid]="
+										parameterErrorFor(definition.id, parameter) ? 'true' : null
+									"
+								>
 									<mat-label>{{ parameter.label }}</mat-label>
 									@switch (parameter.type) {
 										@case ('CHOICE') {
@@ -127,6 +138,11 @@
 											/>
 										}
 									}
+									@if (parameterErrorFor(definition.id, parameter)) {
+										<mat-error>{{
+											parameterErrorFor(definition.id, parameter)
+										}}</mat-error>
+									}
 								</mat-form-field>
 							}
 						</div>
@@ -150,7 +166,10 @@
 	<div class="custom-clauses">
 		@for (item of customClauses(); track item.index) {
 			<div class="custom-clause">
-				<mat-form-field appearance="outline">
+				<mat-form-field
+					appearance="outline"
+					[attr.data-clause-invalid]="customClauseError(item.index, item.clause) ? 'true' : null"
+				>
 					<mat-label>Clause personnalisée {{ $index + 1 }}</mat-label>
 					<textarea
 						matInput
@@ -159,6 +178,9 @@
 						[value]="item.clause.customText"
 						(input)="updateCustomClauseFromEvent(item.index, $event)"
 					></textarea>
+					@if (customClauseError(item.index, item.clause)) {
+						<mat-error>{{ customClauseError(item.index, item.clause) }}</mat-error>
+					}
 				</mat-form-field>
 				<button mat-button type="button" (click)="removeClause(item.index)">Retirer</button>
 			</div>