Je travaille sur Angular Application où je suis confronté à un problème de validation de l'email et du numéro de téléphone
Problème
Pour la validation des e-mails Problème lorsque je mets @ dans le mauvais e-mail et que je ne mets pas .com ou .in exemple -: abcd @ gm .. il n'affiche pas de message d'erreur
Pour la validation du numéro de téléphone , le message d'erreur ne s'affiche que lorsque le numéro de téléphone est laissé vide, lorsque nous saisissons le numéro de téléphone et qu'il dépasse la longueur maximale ou pour la longueur minimale, il ne montre aucun message d'erreur.
<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>
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() { } }
4 Réponses :
minlength
, pas minLength pour 2. J'obtiens une erreur lors de l'implémentation de l'erreur minlength == >> La propriété 'minlength' n'existe pas sur le type 'typeof Validators'. Vouliez-vous dire 'minLength'? Ts (2551)
essayez de cette façon
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)]) });
J'ai appliqué un modèle pour la validation du numéro de téléphone.
Pourquoi n'utilisez-vous pas 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)]) });
MODIFIER: reportez-vous à ce lien pour plus de détails
C'est une sorte de vieille réponse, mais la propriété: emailPattern
pour motif doit utiliser une barre oblique inverse au lieu de guillemets, sinon cela ne fonctionne pas. Il doit s'agir de: emailPattern = /^[a-z0-9._%+- +@[a-z0-9.-edral+\.[az {2,4}$/; code>
Je suggère de l'utiliser dans les validateurs car vous pouvez l'importer dans les validateurs
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; }