Bdtjtk

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 dosen;t put .com or .in example -: abcd@gm .. it dosen'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 leangth then it does not show any error message

I am sharing code here :

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>

1. That's correct actually, test@test can be a valid email.


2. It's minlength, not minLength

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.

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)]),

  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