我正在开发 Angular 应用程序，在验证电子邮件和电话号码时遇到问题
问题
用于电子邮件验证当我将 @ 放入错误的电子邮件中并且未将 .com 或 .in 放入示例中时出现问题 -: abcd@gm .. 它不显示错误消息，
对于电话号码验证，仅当电话号码留空时才会显示错误消息，当我们输入电话号码并且超过最大长度或最小长度时，它不会显示任何内容错误消息。
组件.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() {
}
}
组件.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>
最佳答案
为什么不使用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)])
});
编辑: 引用这个link了解更多详情
关于angular - 响应式(Reactive)表单中电子邮件和电话号码验证面临问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54016008/