angular template driven form validation messages

Question

I am using angular template driven form. Currently I show the error messages inside the HTML page.

    <input 
  type="email" 
  name="email" 
  ngModel 
  #email="ngModel" 
  pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" 
  required>
<br/>

<div *ngIf="email.touched">
  <p *ngIf="email.errors?.required">Email is a required</p>
  <p *ngIf="email.errors?.pattern">This is not a valid Email!!!</p>
</div>

Example Form

I need to move these error messages to my component file. is there any way to do it ?

Priyanka Vadhwani · Accepted Answer · 2021-11-18 06:33:18Z

1

I have create a simple user registration form and implement some inbuilt validations on it. Along with the inbuilt validations, we will also implement some custom validations for the template-driven form.

We will consider the following custom validations for this demo:

Checking for user name availability.
Password pattern validation
Matching the password entered in two different fields

Here is the example of Template Driven Form:

https://stackblitz.com/edit/angular-ivy-eqbltt

answered Nov 18, 2021 at 6:33

Priyanka Vadhwani

1,1659 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angular template driven form validation messages

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related