From d38a529bfa7e2c6ff77a14244dd10c80a722059f Mon Sep 17 00:00:00 2001
From: SondreB <sondre@outlook.com>
Date: Sat, 6 Jul 2024 19:10:22 +0200
Subject: [PATCH] Add max length indicator to bio

---
 app/src/app/profile/edit/edit.component.html | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/src/app/profile/edit/edit.component.html b/app/src/app/profile/edit/edit.component.html
index 82ab8bc8..c1d95755 100644
--- a/app/src/app/profile/edit/edit.component.html
+++ b/app/src/app/profile/edit/edit.component.html
@@ -7,7 +7,7 @@ <h1>Edit your profile</h1>
           <div class="col">
             <mat-form-field class="full-width">
               <mat-label>Name</mat-label>
-              <input matInput placeholder="Name" formControlName="name">
+              <input matInput #name placeholder="Name" maxlength="200" formControlName="name">
             </mat-form-field>
           </div>
         </div>
@@ -15,7 +15,7 @@ <h1>Edit your profile</h1>
           <div class="col">
             <mat-form-field class="full-width">
               <mat-label>Title</mat-label>
-              <input matInput placeholder="Title" formControlName="title">
+              <input matInput #title placeholder="Title" formControlName="title">
               @if (addressForm.controls['title'].hasError('required')) {
                 <mat-error>Title is <strong>required</strong></mat-error>
               }
@@ -36,10 +36,11 @@ <h1>Edit your profile</h1>
           <div class="col">
             <mat-form-field class="full-width">
               <mat-label>Bio</mat-label>
-              <textarea matInput placeholder="Bio" formControlName="bio"></textarea>
+              <textarea maxlength="300" matInput #bio placeholder="Bio" formControlName="bio"></textarea>
               @if (addressForm.controls['bio'].hasError('required')) {
                 <mat-error>Bio is <strong>required</strong></mat-error>
               }
+              <mat-hint align="end">{{bio.value.length}} / 300</mat-hint>
             </mat-form-field>
           </div>
         </div>