[#12653] Copy course modal: Mandatory fields not highlighted

src/web/app/components/copy-course-modal/copy-course-modal.component.html

@@ -14,13 +14,23 @@ <h5 class="modal-title">
       <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">
+          [(ngModel)]="newCourseId" [maxlength]="COURSE_ID_MAX_LENGTH" (focus)="this.newCourseIdIsConflicting = false"
+          required #newCourseIdInput="ngModel">
+        <div [hidden]="newCourseIdInput.valid || (newCourseIdInput.pristine && newCourseIdInput.untouched)" class="invalid-field">
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+            The field Course ID should not be empty.
+        </div>
         <span>{{ COURSE_ID_MAX_LENGTH - newCourseId.length }} characters left</span>
       </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"
+          required #newCourseNameInput="ngModel"/>
+        <div [hidden]="newCourseNameInput.valid || (newCourseNameInput.pristine && newCourseNameInput.untouched)" class="invalid-field">
+            <i class="fa fa-exclamation-circle" aria-hidden="true"></i>
+            The field Course Name should not be empty.
+        </div>
         <span>{{ COURSE_NAME_MAX_LENGTH - newCourseName.length }} characters left</span>
       </div>
       <div class="form-group">
@@ -82,4 +92,4 @@ <h5 class="modal-title">
   <button type="button" class="btn btn-light" (click)="activeModal.dismiss()">Cancel</button>
   <button id="btn-confirm-copy-course" type="button" class="btn btn-primary" (click)="copy()"
     [disabled]="!newCourseId || !newCourseName || !newCourseInstitute">Copy</button>
-</div>
+</div>

src/web/app/components/copy-course-modal/copy-course-modal.component.scss

@@ -7,3 +7,8 @@ hr.solid-divider {
 .invalid {
   border: red 1px solid;
 }
+
+.invalid-field {
+  padding-top: 5px;
+  color: #b50000;
+}

src/web/app/components/copy-course-modal/copy-course-modal.component.ts

@@ -74,12 +74,6 @@
    * 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!');
-      return;
-    }
-
     this.newCourseIdIsConflicting = this.allCourses
       .filter((course: Course) => course.courseId === this.newCourseId).length > 0;
     if (this.newCourseIdIsConflicting) {
@@ -140,4 +134,4 @@
       this.fetchFeedbackSessionsEvent.emit(this.oldCourseId);
     }
   }
-}
+}