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

Question

I have a form:

<input type="password" id="password" name="password" ngModel #password="ngModel" 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 #email="ngModel" 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 #password="ngModel" 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>

What makes the input red in the first place?

JSON Derulo
– JSON Derulo

2024-09-20 13:06:22 +00:00
Commented Sep 20, 2024 at 13:06 — JSON Derulo
– JSON Derulo, Commented Sep 20, 2024 at 13:06

Naren Murali · Accepted Answer · 2024-09-20 13:10:30Z

You need to change your CSS, to also validate ng-touched along with ng-invalid, this will set the red border only when the input is touched.

global_styles.scss

input.ng-invalid.ng-touched { border: 1px solid red; }

Full Code:

import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-root', imports: [FormsModule, CommonModule], standalone: true, styles: [ ` `, ], template: ` <div> <input type="password" id="password" name="password" ngModel #password="ngModel" placeholder="Input text" required /> <span *ngIf="password.touched && password.invalid" id="passwordErrorMessage" class="text-danger" >Password is required.</span > </div> `, }) export class App { name = 'Angular'; } bootstrapApplication(App);

Stackblitz Demo

thanks sir! stackblitz do work fine, but my codes default input border is still red. why? i provided the whole code
@user28273827332 please try the CSS I shared, the CSS is the problem, since that adds the red border.

KleeblattAlex · Accepted Answer · 2024-09-20 13:13:23Z

You can try to use the method markAsUntouched(). See the documentation: https://v17.angular.io/api/forms/AbstractControl#markAsUntouched

import { FormControl } from '@angular/forms'; const control = new FormControl(); // sets state of control as if the user did not touch it control.markAsUntouched();

Collectives™ on Stack Overflow

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

2 Answers 2

global_styles.scss

Full Code:

Stackblitz Demo

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

global_styles.scss

Full Code:

2 Comments

Comments

Related