I need a help on form validation am not able to validate requred filed and password match field

@flycoders_sourav wrote:

I need a help on form validation am not able to validate requred filed and password match field
Please can you on this

Html

<ion-content>

  <ion-grid>

    <ion-row justify-content-center>

      <ion-col align-self-center size-md="6" size-lg="5" size-xs="12">

        

          <div text-center>

            <p class="logo-img"><img src="../../assets/images/logo.png" alt="" /></p>

            <h4>Register</h4>

            <hr>

          </div>

          <form [formGroup]="register">

          <div padding>

            <ion-item class="form-group frm">

              <span><i class="fa fa-user"></i></span>

              <ion-input type="text" class="info-frm" id="email"  placeholder="User Name" ngDefaultControl formControlName="user_name"></ion-input>

            </ion-item>

           

            <div class="error" *ngIf="register.get('user_name').hasError('required') && register.get('user_name').touched">

              Please input your name.

      </div>

      <div class="error" *ngIf="register.get('user_name').hasError('pattern') && register.get('user_name').dirty">

              Name should be being with a letter.

      </div>

       <ion-item class="form-group frm">

              <span><i class="fa fa-envelope"></i></span>

              <ion-input type="email" class="info-frm" id="password" placeholder="Email" ngDefaultControl formControlName="email" ></ion-input>

            </ion-item>

            <div class="error" *ngIf="register.get('email').hasError('required') && register.get('email').touched">

              Please enter your email.

            </div>

            <div class="error" *ngIf="register.get('email').hasError('pattern') && register.get('email').dirty">

              Please enter a valid email adddress.

            </div>

            <ion-item class="form-group frm">

              <span><i class="fa fa-lock"></i></span>

              <ion-input type="password" class="info-frm" id="password"  placeholder="Password"  ngDefaultControl formControlName="password" ></ion-input>

            </ion-item>

            <ion-item class="form-group frm">

              <span><i class="fa fa-lock"></i></span>

              <ion-input type="password" class="info-frm" id="password"  placeholder="Retype Password" ngDefaultControl formControlName="retype_password" ></ion-input>

            </ion-item>

           <ion-item>

              <ion-label class="lab-gry"><i class="fa fa-globe"></i> Select Country</ion-label>

              <ion-select placeholder="India (+91)">

                <ion-select-option *ngFor="let item of country_list"  value="{{item.dial_code}}">{{item.name}} ({{item.dial_code}})</ion-select-option>

              </ion-select>

            </ion-item>

             <ion-item class="form-group frm">

              <span><i class="fa fa-mobile-phone"></i></span>

              <ion-input type="number" class="info-frm" id="password"  placeholder="Mobile No" ngDefaultControl formControlName="mobile_number" [(ngModel)]="mobile_number" ></ion-input>

            </ion-item>

            <button size="small" expand="block" class="btn sing-btn verfy-btn"(click)="send_otp_to_the_number()" *ngIf="isVerify" >Verify Now</button>

            <ion-item class="form-group frm">

              <span><i class="fa fa-code"></i></span>

              <ion-input type="text" class="info-frm" id="password" placeholder="Invitation code(optional)" ngDefaultControl formControlName="inv_code"></ion-input>

            </ion-item>

            <div class="custom-control custom-checkbox remembar">

              <input formControlName="pp" ngDefaultControl type="checkbox" class="custom-control-input" id="customCheck2" name="example1">

              <label class="custom-control-label" for="customCheck2"> <span class="remember-chk">By signing up you agree to our 

                <a>User Agreement</a>,Privacy Policy <a> and <a>Draw Terms & Conditions</a></a>

              </span> </label>

            </div> 

          </div>

    

          <div padding>

            <button size="large" expand="block" class="btn sing-btn" [disabled]="!register.valid" (click)="do_register()">Register</button>

            <p class="forgot text-center">

              <span>Already have An Account | <a routerLink="/login" (click)="goToLogin();">Login now</a></span> 

              <!-- <span class="regi"><a routerLink="/register">Register Now</a></span>  -->

            </p>

          </div>

        </form>

      </ion-col>

    </ion-row>

  </ion-grid>

</ion-content>

.ts

this.register = fb.group({

   

      "user_name"      :  ["", [ Validators.required,Validators.pattern('[a-zA-Z ]*')]],

     "email"      :  ["", [ Validators.required,Validators.pattern(EMAILPATTERN)]],

      "password"      :  ["", Validators.required],

      "retype_password"      :  ["", Validators.required],

      //"country_code"      :  ["", Validators.required],

      "mobile_number"      :  ["", Validators.required],

      "inv_code"      :  [""],

      "pp"      :  [false, Validators.requiredTrue ],

   });

this my code . Please help me out.
Thank u

Posts: 1

Participants: 1

Read full topic