alert mandatory monitoring list

src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.html

@@ -68,15 +68,9 @@
                                 <i class="feather ft-plus"> New Building</i>
                               </button>
                             </div>
-                            <small
-                              class="form-text text-muted danger"
-                              *ngIf="submitted && f.buildingId.errors"
-                              class="invalid-feedback"
-                            >
-                              <div *ngIf="f.buildingId.errors.required">
-                                Building is required
+                            <div *ngIf="projectInfo.get('buildingId').touched && projectInfo.get('buildingId').invalid" class="text-danger">
+                              Building is required.
                             </div>
-                            </small>
                           </div>
                           <div class="form-group">
                             <label for="floorId" style="color: #242222"

src/app/content/hemat-app/list-monitoring/add-edit-list/add-edit-list.component.ts

@@ -294,6 +294,7 @@ export class AddEditListComponent {
   save() {
     if (this.mode === "add") {
       if (this.projectInfo.invalid) {
+        this.markFormGroupTouched(this.projectInfo)
         return;
       }
       const formData = this.projectInfo.value;
@@ -318,6 +319,15 @@ export class AddEditListComponent {
     }
   }
 
+  markFormGroupTouched(formGroup: FormGroup) {
+    (Object as any).values(formGroup.controls).forEach((control) => {
+      control.markAsTouched();
+      if (control.controls) {
+        this.markFormGroupTouched(control);
+      }
+    });
+  }
+
   cancel() {
     this.router.navigate(["/list-monitoring"]);
   }