Add max length indicator to bio

block-core · Jul 6, 2024 · d38a529 · d38a529
1 parent 2061001
commit d38a529
Showing 1 changed file with 4 additions and 3 deletions.
diff --git a/app/src/app/profile/edit/edit.component.html b/app/src/app/profile/edit/edit.component.html
@@ -7,15 +7,15 @@ <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>
         <div class="row">
           <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>