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

[XiangyuTan-learning]

Fixes #12653

Fixed validation issues in the "Copy Course" feature to ensure that users properly fill in all required fields (Course ID and Course Name) before submitting the form. Previously, there was a key issue where the validation messages did not update immediately when users cleared the input fields, leading to a suboptimal user experience.

changes have been made:

1. HTML File Changes:
   1.1 Added red error messages below the Course ID and Course Name input fields:
   Displays "The field Course ID should not be empty" when the Course ID is empty.
   Displays "The field Course Name should not be empty" when the Course Name is empty.
   1.2 Used the (ngModelChange) event to monitor user input to ensure that error messages are displayed immediately when an input field is cleared

2. TypeScript File (copy-course-modal.component.ts) Changes:
   2.1 Added courseIdEmptyError and courseNameEmptyError variables to track the error state of the Course ID and Course Name input fields.
   Modified the ngOnInit() method to initialize these error states.
   2.2 Added onCourseIdChange(value: string) and onCourseNameChange(value: string) methods to update the error state in real-time.
   2.3 Modified the copy() method to check the input values when the user clicks the "Copy" button. If any required field is empty, the copy logic is blocked, and an error message is displayed.

New UI afterwards:

[github-actions]

Hi @XiangyuTan-learning, thank you for your interest in contributing to TEAMMATES!
However, your PR does not appear to follow our contribution guidelines:

• Title must start with the issue number the PR is fixing in square brackets, e.g. [#<issue-number>]

Please address the above before we proceed to review your PR.

[XiangyuTan-learning]

Anyone knows how to solve this title format issue? I believe I have definitely used the Square Bracket for the issue number, any suggestions appreciated.

[XiangyuTan-learning]

And how to add label, seem like just type in s.ToReview?

[damithc]

@XiangyuTan-learning Thanks for the PR. Note that the TEAMMATES currently in low-activity phase (the dev team is busy with some other tasks). So, PRs are unlikely to get speedy responses for a while. We expect to resume active development around Jan 2025.

[XiangyuTan-learning]

@damithc Thank you for your reply, can you please give me some advice about how can I solve the title format issue and Component Tests? thanks

[damithc]

@damithc Thank you for your reply, can you please give me some advice about how can I solve the title format issue and Component Tests? thanks

Seems to be OK now.

[XiangyuTan-learning]

@damithc Thank you for your reply, can you please give me some advice about how can I solve the title format issue and Component Tests? thanks感谢您的回复，您能否给我一些关于如何解决标题格式问题和组件测试的建议？谢谢

Seems to be OK now.现在似乎没问题。
I have add some unit testing for the changing I made, and I have passed the static analysis
./gradlew int and npm run lint in my laptop. and pass the npm test -- -u as well. Hoping this can ensure the consistency.

[XiangyuTan-learning]

Can anyone give me some help about the Component Test for ubuntu, I don't know much about this issue, any suggestions really appreciated!