Error message will be thrown when null input

TEAMMATES · Oct 18, 2024 · c73e52f · c73e52f
1 parent 6d4f9f4
commit c73e52f
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 6 deletions.
diff --git a/src/web/app/components/copy-course-modal/copy-course-modal.component.html b/src/web/app/components/copy-course-modal/copy-course-modal.component.html
@@ -13,15 +13,17 @@ <h5 class="modal-title">
       </div>
       <div class="form-group">
         <label>Course ID:</label>
-        <input [class.invalid]="newCourseIdIsConflicting" id="copy-course-id" type="text" class="form-control" placeholder="e.g. CS3215-2013Semester1"
-          [(ngModel)]="newCourseId" [maxlength]="COURSE_ID_MAX_LENGTH" (focus)="this.newCourseIdIsConflicting = false">
+        <input [class.invalid]="newCourseIdIsConflicting || courseIdEmptyError" id="copy-course-id" type="text" class="form-control" placeholder="e.g. CS3215-2013Semester1"
+          [(ngModel)]="newCourseId" [maxlength]="COURSE_ID_MAX_LENGTH" (focus)="this.newCourseIdIsConflicting = false; courseIdEmptyError = false" (ngModelChange)="onCourseIdChange($event)">
         <span>{{ COURSE_ID_MAX_LENGTH - newCourseId.length }} characters left</span>
+        <div *ngIf="courseIdEmptyError" class="text-danger">The field Course ID should not be empty.</div>
       </div>
       <div class="form-group">
         <label>Course Name:</label>
         <input id="copy-course-name" class="form-control" type="text" placeholder="e.g. Software Engineering" [(ngModel)]="newCourseName"
-          [maxlength]="COURSE_NAME_MAX_LENGTH"/>
+          [maxlength]="COURSE_NAME_MAX_LENGTH" (focus)="courseNameEmptyError = false" (ngModelChange)="onCourseNameChange($event)"/>
         <span>{{ COURSE_NAME_MAX_LENGTH - newCourseName.length }} characters left</span>
+        <div *ngIf="courseNameEmptyError" class="text-danger">The field Course Name should not be empty.</div>
       </div>
       <div class="form-group">
         <label class="ngb-tooltip-class">

diff --git a/src/web/app/components/copy-course-modal/copy-course-modal.component.ts b/src/web/app/components/copy-course-modal/copy-course-modal.component.ts
@@ -40,6 +40,8 @@ export class CopyCourseModalComponent implements OnInit {
 
   isCopyFromOtherSession: boolean = false;
   newCourseIdIsConflicting: boolean = false;
+  courseIdEmptyError: boolean = false;
+  courseNameEmptyError: boolean = false;
   institutes: string[] = [];
   timezones: Timezone[] = [];
   newTimezone: string = '';
@@ -68,15 +70,19 @@ export class CopyCourseModalComponent implements OnInit {
       this.newCourseInstitute = this.institutes[0];
     }
     this.newTimezone = this.timezoneService.guessTimezone();
+
+    this.courseIdEmptyError = false;
+    this.courseNameEmptyError = false;
   }
 
   /**
    * Fires the copy event.
    */
   copy(): void {
-    if (!this.newCourseId || !this.newCourseName) {
-      this.statusMessageService.showErrorToast(
-          'Please make sure you have filled in both Course ID and Name before adding the course!');
+    this.courseIdEmptyError = !this.newCourseId;
+    this.courseNameEmptyError = !this.newCourseName;
+
+    if (this.courseIdEmptyError || this.courseNameEmptyError) {
       return;
     }
 
@@ -100,6 +106,16 @@ export class CopyCourseModalComponent implements OnInit {
 
     this.activeModal.close(result);
   }
+  /**
+    * Real time check user input, triggered by ngModelChange
+    */
+  onCourseIdChange(value: string): void {
+    this.courseIdEmptyError = !value.trim();
+   }
+
+  onCourseNameChange(value: string): void {
+    this.courseNameEmptyError = !value.trim();
+  }
 
   /**
    * Toggles selection of a feedback session.