Facing Problem in validation of email and Phone number in Reactive form

Question

I am working on Angular Application where I am facing problem in validation of email and Phone number

Problem

1. For email validation Problem when I put @ in wrong email and doesn't put .com or .in example -: abcd@gm .. it doesn't show error message,

2. For Phone number validation, error message is only shown when Phone number is left blank, when we enter phone number and it exceed max length or for min length then it does not show any error message.

component.ts

import { Component, OnInit } from '@angular/core';
import { ServicesService } from '../service/services.service';
import { FormGroup  , FormControl  , Validators } from '@angular/forms';
@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.scss']
})
export class RegisterComponent implements OnInit {

 constructor( public restapi:ServicesService) {

    this.user = new FormGroup({

      email: new FormControl('', [Validators.required,Validators.email]),
      phone: new FormControl('', [Validators.required, Validators.minLength(10)]),
      password: new FormControl('', [Validators.required, Validators.minLength(6)])
      });

   }
ngOnInit() {


  }
}

component.html

 <form class="example-form" novalidate (ngSubmit)='user_signup(user)'  [formGroup]='user'>
          <div class="row align-items-center">
            <div class="col-md-1">
              <label><img src="assets/imgs/email-icon.svg"/></label>
            </div>
            <div class="col-md-11">
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Email" name='email' formControlName='email' value="" />
              </mat-form-field>
              <div style='color:#fff ;float: left ;font-size: 10px;' class="required" no-lines item-end *ngIf="( user.get('email').hasError('required') || user.get('email').hasError('email') ) && user.get('email').touched">
                <span class="error" *ngIf="user.get('email').hasError('required') && user.get('email').touched">
                  Email Required
                </span>
                <span class="error" *ngIf="user.value.email && user.get('email').hasError('email') && user.get('email').touched">
                  Invalid email!
                </span>
              </div>
            </div>
          </div>
          <div class="row align-items-center">
            <div class="col-md-1">
              <label><img src="assets/imgs/mobile-icon.svg"/></label>
            </div>
            <div class="col-md-11">

              <mat-form-field class="example-full-width" >
                <input matInput type='number' placeholder="Phone Number:"  name="phone" formControlName="phone" required/>

              </mat-form-field>

              <div style='color: rgb(248, 226, 226) ; float:left ; font-size: 10px;' class="required" item-end no-lines *ngIf="( user.get('phone').hasError('required') || user.get('phone').hasError('minlength') || user.get('phone').hasError('maxlength'))&& ( user.get('phone').touched)">

                <span class="error" *ngIf="user.get('phone').hasError('required') && user.get('phone').touched">
                    Phone number Required
                  </span>

                  <span class="error" *ngIf="user.get('phone').hasError('maxlength') && user.get('phone').touched">
                    Min 10 digit
                  </span>

                </div>


            </div>
          </div>
     
    <!--Phone otp-->
          <div class="row align-items-center"  >
            <div class="col-md-1">
              <label><img src="assets/imgs/otp-icon.svg"/></label>
            </div>
            <div class="col-md-9">
              <mat-form-field class="example-full-width">
                <input matInput placeholder="Verify phone otp:" value="" (input)='onInputTimePhone($event.target.value)' required/>
              </mat-form-field>
              <div>
                <span *ngIf='Otpvarification'> Please enter Otp </span>
               </div>
            </div>
            <div class="col-md-2">
              <a class="get_otp" mdbBtn mdbWavesEffect (click)="phoneGetOtp(user.value.phone)">Get otp</a>
            </div>
          </div>
  <!--Phone otp ends-->
          <div class="row align-items-center">
            <div class="col-md-1">
              <label><img src="assets/imgs/password-icon.svg"/></label>
            </div>
            <div class="col-md-9">
              <mat-form-field class="example-full-width">
                <input matInput type='{{type}}' placeholder="Password:" name='password' formControlName='password' value=""  />
              </mat-form-field>
              <div style='color: #fff ; float:left ; font-size: 10px;' class="required" text-center no-lines *ngIf="( user.get('password').hasError('required') || user.get('password').hasError('minlength') || user.get('password').hasError('maxlength'))&& user.get('password').touched">
                <span class="error" *ngIf="user.get('password').hasError('required') && user.get('password').touched">
                  Password is required
                </span>
                <span class="error" *ngIf="user.get('password').hasError('minlength') && user.get('password').touched">
                  Min 6 characters
                </span>
                </div>
            </div>
            <div class="col-md-2">
                    <a mdbWavesEffect *ngIf="!showPass" (click)="showPassword()"  class="showPassword">
                        <img src="assets/imgs/show.svg" >
                    </a>
                    <a mdbWavesEffect *ngIf="showPass" (click)="showPassword()" class="showPassword">
                        <img src="assets/imgs/hide.svg" >
                    </a>
            </div>

          </div>
         
          <button mdb mdbWavesEffect [disabled]="disabledAgreement" class="register_btn">Sign Up</button>
        </form>

Solution

Why don't you use Validators.pattern

emailPattern = "^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$";
phoneNumber = "^(\+\d{1,3}[- ]?)?\d{10}$";
this.user = new FormGroup(
  email: new FormControl('', [Validators.required, Validators.pattern(this.emailPattern)]),
  // email: new FormControl('', [Validators.required, Validators.email]),
  phone: new FormControl('', [Validators.required, Validators.pattern(this.phoneNumber)]),
  password: new FormControl('', [Validators.required, Validators.minLength(6)])
  });

EDIT: refer to this link for more details

Comments

[Testing Anurag]

for 2. I am getting error implementing minlength error ==>> Property 'minlength' does not exist on type 'typeof Validators'. Did you mean 'minLength'?ts(2551)

[k.vincent]

It's a kind of an old answer, but the property: emailPattern for pattern must use backslash instead of quotes, otherwise it doesn't work. It must be: emailPattern = /^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$/;