feature(settings-dialog): input validations and error handeling

Author: esteecodes

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.html

@@ -22,6 +22,17 @@ <h3>Try with your Blog</h3>
           <i class="pi pi-times" (click)="newBlogInput=''"></i>
         }
         <input type="text" pInputText placeholder="Type a Blog URL" [(ngModel)]="newBlogInput" />
+        <div class="error">
+          @if (emptyInput) {
+          <small>Please provide a valid Hashnode Blog URL.</small>
+          }
+          @if (noBlogFound) {
+          <small>No Hashnode Blog found.</small>
+          }
+          @if (invalidInput) {
+          <small>Invalid input, please try again.</small>
+          }
+        </div>
      </span>
     </div>
     <div class="dialog-actions">

angular-primeng-app/src/app/partials/settings-dialog/settings-dialog.component.scss

@@ -31,6 +31,16 @@ p-dialog {
     input {
       margin : 1rem 0;
     }
+
+
+    .error {
+      color: red;
+      position: absolute;
+      top: 4rem;
+      font-size: 0.9rem;
+      text-align: center;
+      font-weight: 300;
+    }
   }
 }