frontend #35: fix validation errors in userForm bio field

src/app/shared/user-form/ui/user-form-exceptions/user-form-exceptions.component.html

@@ -1,8 +1,10 @@
 <div>
-	<div style="padding: 6px" *ngIf="errors()?.['required']">
-		<ion-text color="danger">{{ field() }} is required.</ion-text>
-	</div>
-	<div style="padding: 6px" *ngIf="errors()?.['maxlength']">
-		<ion-text color="danger">{{ field() }} must be at most 20 characters long.</ion-text>
-	</div>
+  <div *ngIf="errors()?.['required']" style="padding: 6px">
+    <ion-text color="danger">{{ field() }} is required.</ion-text>
+  </div>
+  <div *ngIf="errors()?.['maxlength']" style="padding: 6px">
+    <ion-text
+      color="danger">{{ field() + " must be at most " + errors()?.['maxlength']['requiredLength'] + " characters long." }}
+    </ion-text>
+  </div>
 </div>

src/app/shared/user-form/ui/user-form-exceptions/user-form-exceptions.component.ts

@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { Component, input } from '@angular/core';
+import { Component, effect, input } from '@angular/core';
 import { ValidationErrors } from '@angular/forms';
 import { IonText } from '@ionic/angular/standalone';
 
@@ -11,7 +11,11 @@ import { IonText } from '@ionic/angular/standalone';
 	imports: [IonText, CommonModule]
 })
 export class UserFormExceptionsComponent {
-	constructor() {}
+	constructor() {
+		effect(() => {
+			console.error(this.errors());
+		});
+	}
 
 	errors = input<ValidationErrors | null>();
 	field = input<string>();

src/app/shared/user-form/user-form.component.html

@@ -48,8 +48,8 @@ <h2>{{ formTitle() }}</h2>
     </ion-item>
     @if (userForm.controls.bio.touched && userForm.controls.bio.invalid) {
       <app-user-form-exceptions
-        [field]="'bio'"
-        [errors]="userForm.controls.bio"
+        [field]="'Bio'"
+        [errors]="userForm.controls.bio.errors"
       ></app-user-form-exceptions>
     }
     <div>