Angular Template-Driven Form: Validate Password Field Only After User Interaction

Hello everyone! I hope this video has helped solve your questions and issues. This video is shared because a solution has been found for the question/problem. I create videos for questions that have solutions. If you have any other issues, feel free to reach out to me on Instagram: https://www.instagram.com/ky.emrah

Below, you can find the text related to the question/problem. In the video, the question will be presented first, followed by the answers. If the video moves too fast, feel free to pause and review the answers. If you need more detailed information, you can find the necessary sources and links at the bottom of this description. I hope this video has been helpful, and even if it doesn't directly solve your problem, it will guide you to the source of the solution. I'd appreciate it if you like the video and subscribe to my channel!Angular Template-Driven Form: Validate Password Field Only After User Interaction

I have a form:
input
type="password"
id="password"
name="password"
ngModel
#include placeholder="Input text"
required
/
span
*ngIf="password.touched && password.invalid"
id="passwordErrorMessage"
class="text-danger"
Password is required. /span

/div

input
type="password"
id="password"
name="password"
ngModel
#include placeholder="Input text"
required
/
span
*ngIf="password.touched && password.invalid"
id="passwordErrorMessage"
class="text-danger"
Password is required. /span

/div

this is a template-driven-form
The problem with validation now is that when the form is loaded- and the input is empty, it is red. The input should be red not when the form is loaded, but when the input was touched and still is empty. How to do it?
the whole code:
h2 class="text-align-center" Login /h2
div class="app-plate"
form #loginForm="ngForm"
div class="login-form"
div
div class="form__control"
label for="email" Email /label
!--Use the name `email` for the form control.--
input
type="email"
id="email"
placeholder="Input text"
name="email"
emailValidator
ngModel
#include required
/
span
*ngIf="password.touched && password.invalid"
id="emailErrorMessage"
class="text-danger"
Email is required. /span

/div
div class="form__control"
label for="password" Password /label
!--Use the name `password` for the form control.--
input
type="password"
id="password"
name="password"
ngModel
#include placeholder="Input text"
required
/
span
*ngIf="password.touched && password.invalid"
id="passwordErrorMessage"
class="text-danger"
Password is required. /span

/div
/div
div
div class="form__action"
app-button button_text="Login" /app-button
/div
div class="form__text"
If you don't have an account you may strong Registration /strong
/div
/div
/div
/form
/div

h2 class="text-align-center" Login /h2
div class="app-plate"
form #loginForm="ngForm"
div class="login-form"
div
div class="form__control"
label for="email" Email /label
!--Use the name `email` for the form control.--
input
type="email"
id="email"
placeholder="Input text"
name="email"
emailValidator
ngModel
#include required
/
span
*ngIf="password.touched && password.invalid"
id="emailErrorMessage"
class="text-danger"
Email is required. /span
Source of the question:
https://stackoverflow.com/questions/79006871

Question and source license information:
https://meta.stackexchange.com/help/licensing
https://stackoverflow.com/

Видео Angular Template-Driven Form: Validate Password Field Only After User Interaction канала Emrah KAYA