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
