How to create equal passwords validation in a simple way

Ionic Framework ionic-v3
1

Hello my friends , I have a problem with a form that i can not know how to put validators for passwords
my page.html

<ion-header>

  <ion-navbar color="tertiary">
    <ion-buttons left>
      <button ion-button icon-only menuToggle="left">
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Inscription</ion-title>
  </ion-navbar>

</ion-header>

<ion-content  padding >

<ion-row justify-content-center align-items-center style="height: 100%">
  <p>
    Inscrivez-Vous
  </p>
<form #f="ngForm" (ngSubmit)="presentToast()" [formGroup]="Form" (ngSubmit)="onSubmit(f)">

          <ion-item>
            <ion-label stacked>CIN  :  </ion-label>
            <ion-input  name="cin" type="number" placeholder="10558858" formControlName="cin" clearInput ngModel required></ion-input>
          </ion-item>

            <ion-item>
              <ion-label stacked>Nom et Prénom :  </ion-label>
              <ion-input  name="fullname" type="text" formControlName="fullname" placeholder="exp : Abir Tounsi " clearInput ngModel required></ion-input>
            </ion-item>

            <ion-item>
              <ion-label stacked>Email :  </ion-label>
              <ion-input  name="mailadress"  type="email" formControlName="mailadress"  placeholder="abir.tounsi@gmail.com " clearInput ngModel required></ion-input>
            </ion-item>

            <ion-item>
   <ion-label stacked>Mot de passe  :</ion-label>
   <ion-input name="password" type="password" formControlName="password" placeholder="Mot de passe" clearInput ngModel required></ion-input>
          </ion-item>

          <ion-item>
 <ion-label stacked>Retaper le Mot de passe  : </ion-label>
 <ion-input name="password-repeat" type="password" formControlName="password_repeat" equals-to="Form.password"  placeholder="Retaper le Mot de passe" clearInput ngModel="password" required></ion-input>
        </ion-item>

  <ion-item>
    <ion-label stacked>Date de Naissance : </ion-label>
    <ion-input name="date-ns" type="date" placeholder="Votre date de naissance : " formControlName="date_ns" displayFormat="MM DD YY" cancel-text ngModel="password_repeat" required></ion-input>
  </ion-item>

              <ion-col text-center>
              <button ion-button block color="success" (click)="onGoToInscrire()" [disabled]="f.invalid" >
                Inscrivez-Vous
              </button>
              </ion-col>

              <ion-col text-center>
                    <button ion-button block color="danger" type="reset" [disabled]="f.invalid">
                    Initialiser
                    </button>
                  </ion-col>
                </form>
</ion-row>
</ion-content>

my page.ts

import { Component, OnInit } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ToastController } from 'ionic-angular';
import { EspaceCitoyenPage } from '../espace-citoyen/espace-citoyen';
import { FormBuilder, FormGroup, Validators, NgForm } from '@angular/forms';

@Component({
  selector: 'page-inscription',
  templateUrl: 'inscription.html',
})

export class InscriptionPage {
private Form : FormGroup;

constructor(public navCtrl: NavController, public navParams: NavParams, public toastCtrl: ToastController, private formBuilder: FormBuilder) {

this.Form = formBuilder.group({
    cin: ['', Validators.compose([Validators.required, Validators.pattern('[0-9]*'), Validators.minLength(8), Validators.maxLength(8)])] ,
    fullname: ['', Validators.compose([Validators.required, Validators.pattern('[a-zA-Z]*'), Validators.minLength(5), Validators.maxLength(30)  ])],
    mailadress: ['', Validators.compose([Validators.required , Validators.pattern('^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$')])],
    password: ['', Validators.compose([Validators.required, Validators.minLength(8) ])],
    password_repeat: ['', Validators.compose([Validators.required, Validators.minLength(8),  Validators.maxLength(30) ])],
    date_ns : ['', Validators.compose([Validators.required ])]
});


  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad InscriptionPage');
  }

onGoToInscrire() {
this.navCtrl.push(EspaceCitoyenPage);

}

presentToast() {
    const toast = this.toastCtrl.create({
      message: 'FĂ©licitations ; Vous ĂȘtes inscrit !',
      duration: 4000
    });
    toast.present();
  }


  onSubmit(form: NgForm) {
      console.log(form.value);
  }

}

please help me , i am trying for hours and still did not solve this

2

Please I need this really

3 
 onSubmit(form: NgForm) {
      if (this.form.get('password').value != this.form.get('password_repeat').value) {
            console.log('Password do not Match');
      }
      console.log(form.value);
  }
2 Likes
4

similar question: I need help to confirm email and password

1 Like
5

thank u so much , that worked

6

You’re highly welcome dude

1 Like