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

user_10755874 0
Viewed 15422

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>
angular-reactive-forms angular-forms angular
4 Answers

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

user_68214410
  1. That's correct actually, test@test can be a valid email.
  2. It's minlength, not minLength
user_80053350

I suggest to use in validators as you can import it in validators

import { AbstractControl } from '@angular/forms';


export function phonenovalid(control:AbstractControl):{[key:string]:any}|boolean{

    const pattern=/^\d{10}$/.test(control.value) ;
    return  pattern?{'phoneval':{value:control.value}}:true;

}
user_128177960

try this way 

this.user = new FormGroup({

  email: new FormControl('', [Validators.required,Validators.email]),
  phone: new FormControl('', [Validators.required, Validators.pattern("[0-9]{0-10}")]),
  password: new FormControl('', [Validators.required, Validators.minLength(6)])
});

I have applied pattern for phone number validation.

user_86128350
Related