Improved error display in form

Author: Bernardo-MG

src/app/login/component/login-form/login-form.component.html

@@ -6,16 +6,16 @@ <h4 class="card-header">Login</h4>
                 <div class="form-group">
                     <label for="username">Username</label>
                     <input type="text" formControlName="username" class="form-control"
-                        [ngClass]="{ 'is-invalid': isFormInvalid() && form.get('username')?.errors }" />
-                    <div *ngIf="isFormInvalid() && form.get('username')?.hasError('required')" class="invalid-feedback">
+                        [ngClass]="{ 'is-invalid': isFormInvalid('username') }" />
+                    <div *ngIf="isFormInvalid('username') && form.get('username')?.hasError('required')" class="invalid-feedback">
                         Username is required
                     </div>
                 </div>
                 <div class="form-group">
                     <label for="password">Password</label>
                     <input type="password" formControlName="password" class="form-control"
-                        [ngClass]="{ 'is-invalid': isFormInvalid() && form.get('password')?.errors }" />
-                    <div *ngIf="isFormInvalid() && form.get('password')?.hasError('required')" class="invalid-feedback">
+                        [ngClass]="{ 'is-invalid': isFormInvalid('password') }" />
+                    <div *ngIf="isFormInvalid('password') && form.get('password')?.hasError('required')" class="invalid-feedback">
                         Password is required
                     </div>
                 </div>

src/app/login/component/login-form/login-form.component.ts

@@ -30,8 +30,21 @@ export class LoginFormComponent {
     }
   }
 
-  public isFormInvalid(): boolean {
-    return this.form.invalid && (this.form.dirty || this.form.touched);
+  public isFormInvalid(field: string): boolean {
+    let invalid: boolean;
+
+    if(this.form.invalid) {
+      const formField = this.form.get(field);
+      if(formField){
+        invalid = (formField?.dirty || formField?.touched) && (formField?.errors != null);
+      } else {
+        invalid = false;
+      }
+    } else {
+      invalid = false;
+    }
+
+    return invalid;
   }
 
   public canLogin(): boolean {