Email validation in angular

Question

1.00/5 (2 votes)

See more:

email validation in angular requite and pattern

What I have tried:

<pre lang="HTML">
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel">Employee Detail</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">


          <form [formGroup]="formValue">
            <div class="mb-3">
              <label for="exampleInputEmail1" class="form-label">First Name</label>
              <input type="text" formControlName="firstName" class="form-control" id="exampleInputEmail1"
                aria-describedby="emailHelp">
              
                First Name
                required
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Last Name</label>
              <input type="text" formControlName="lastName" class="form-control" id="exampleInputPassword1">
              Last
                Name
                required
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Email</label>
              <input type="email" formControlName="email" class="form-control" id="exampleInputPassword1">



              <div class="text-danger"
                *ngIf="(formValue.controls['email'].dirty || formValue.controls['email'].touched)">
                <span *ngIf="formValue.hasError('required','email')">email required</span>
                <span *ngIf="formValue.hasError('pattern','email')">invalid email</span>
                <span></span>
              </div>




            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Mobile</label>
              <input type="text" formControlName="mobile" class="form-control" id="exampleInputPassword1"
                maxlength="10">
              Mobile
                number required
            </div>
            <div class="mb-3">
              <label for="exampleInputPassword1" class="form-label">Salary</label>
              <input type="text" formControlName="salary" maxlength="7" class="form-control" id="exampleInputPassword1">
              Salary

                required
            </div>
          </form>

JavaScript

ngOnInit(): void {
    this.formValue = this.formbuilder.group({
      firstName: ['', Validators.required],
      lastName: ['', Validators.required],
      email: [
        '',
        Validators.required,
        Validators.pattern('[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,4}$'),
      ],
      mobile: ['', Validators.required],
      salary: ['', Validators.required],
    });
    this.getAllEmployee();
  }
  
in angular validation for email not work please suggest

Posted 15-Sep-22 0:04am

UDTWS

Updated 15-Sep-22 2:00am

Add a Solution

Comments

Richard Deeming 15-Sep-22 6:06am

You seem to have forgotten to ask a question.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

OriginalGriff · Answer 1 · 2022-09-15T02:00:00

Emails addresses are more complicated than that: they can contain spaces and "@"s so a basic validation can be fraught with problems. Especially since "." is a special character in regexes meaning "match anything at all" ...

This is the email address validator that Expresso suggests:

([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})

But I would suggest that validating emails is a waste of time: send a confirmation email to the address they provided and get them to click the link before they can go any further. That way, not only do you validate the email address, but you confirm that it's live and genuine at the same time.
a@b.com is a valid email address, but nobody lives there ...

If you are going to work with Regexes, then get a copy of Expresso[^] - it's free, and it examines and generates Regular expressions as well as provide useful examples.