Ionic 5电子邮件反应式表单验证
Ionic 5电子邮件反应式表单验证
提问于 2021-05-31 14:39:34
我有一个奇怪的问题，因为我在ionic中表现更好，但我被一个简单的bug卡住了。我使用的是反应式表单，每个验证都很好，电子邮件验证也很好，但有一个小故障。我尝试了非常正则的表达式，但还是失败了。
开门见山。
TS文件。
initForm(courseId) {
this.form = this.formBuilder.group({
title: ['', [Validators.required]],
full_name: ['', [Validators.required]],
email: ['',Validators.compose([Validators.required, Validators.pattern(/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/), Validators.email]),],
country: ['', [Validators.required]],
city: ['', [Validators.required]],
timezone: ['', [Validators.required]],
job_title: ['', [Validators.required]],
experience: ['', [Validators.required]],
short_bio: ['', [Validators.required]],
education: ['', [Validators.required]],
mobile_no: ['', [Validators.required, Validators.pattern('^[0-9]+$')]],
address: ['', [Validators.required]],
courseid: [courseId]
});
}Html文件
<form [formGroup]="form">
<ion-list lines="full">
<ion-item *ngIf="titles.length">
<ion-label color="primary">
Title
<div class="invalid-question" *ngIf="isSubmit && !f.title.value">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-label>
<ion-select formControlName="title">
<ion-select-option disabled value="">Select one</ion-select-option>
<ion-select-option *ngFor="let title of titles" [value]="title">{{title}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label color="primary" position="floating">Full Name</ion-label>
<ion-input
placeholder="Type here..."
formControlName="full_name"
type="text"
></ion-input>
<div class="invalid" *ngIf="(isSubmit && !f.full_name.value) || (f.full_name.invalid && (f.full_name.dirty || f.full_name.touched))">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-item>
<ion-item>
<ion-label color="primary" position="floating">Email</ion-label>
<ion-input placeholder="Type here..." formControlName="email" type="text"></ion-input>
<div class="invalid" *ngIf="(isSubmit && !f.email.value) || (f.email.invalid && (f.email.dirty || f.email.touched))">
<!-- <ion-text color="danger" *ngIf="!f.email.value">This field is required.</ion-text> -->
<ion-text color="danger" *ngIf="f.email.touched && f.email.errors?.email && f.email.hasError('pattern')">Please enter valid email address.</ion-text>
<ion-text color="danger" *ngIf="(f.email.touched || isSubmit) && f.email.errors?.required">This field is required.</ion-text>
<!-- <ion-text color="danger" *ngIf="f.email.value && f.email.invalid && !f.email.touched">Please enter valid email address.</ion-text> -->
</div>
</ion-item>
<ion-item *ngIf="allCountries.length">
<ion-label color="primary">Country
<div class="invalid-question" *ngIf="isSubmit && !f.country.value">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-label>
<ion-select formControlName="country" (ionChange)="getAllCities($event)">
<ion-select-option disabled value="">Select one</ion-select-option>
<ion-select-option *ngFor="let country of allCountries" [value]="country">{{country}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item *ngIf="cities.length">
<ion-label color="primary">City
<div class="invalid-question" *ngIf="isSubmit && !f.city.value">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-label>
<ion-select placeholder="Select City" formControlName="city">
<ion-select-option disabled value="">Select one</ion-select-option>
<ion-select-option *ngFor="let city of cities" [value]="city">{{city}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item *ngIf="timeZon.length">
<ion-label color="primary">
Timezone
<div class="invalid-question" *ngIf="isSubmit && !f.timezone.value">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-label>
<ion-select placeholder="Select Time Zone" formControlName="timezone">
<ion-select-option disabled value="">Select one</ion-select-option>
<ion-select-option *ngFor="let zone of timeZon" [value]="zone">{{zone}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item *ngIf="form.get('city').value">
<ion-label color="primary" position="floating">Mobile No</ion-label>
<div class="countryCode display-flex w-100">
<ion-input class="code" [value]="countyCode" *ngIf="countyCode" type="tel" disabled></ion-input>
<ion-input class="number" placeholder="Type here..." appIntegerInput formControlName="mobile_no" type="tel"></ion-input>
</div>
<div class="invalid" *ngIf="(isSubmit && !f.mobile_no.value) || (f.mobile_no.invalid && (f.mobile_no.dirty || f.mobile_no.touched))">
<ion-text color="danger" *ngIf="!f.mobile_no.value">This field is required.</ion-text>
<ion-text color="danger" *ngIf="f.mobile_no.value && f.mobile_no.invalid">Please enter valid mobile number.</ion-text>
</div>
</ion-item>
<ion-item *ngIf="educations.length">
<ion-label color="primary">Education
<div class="invalid-question" *ngIf="isSubmit && !f.education.value">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-label>
<ion-select color="primary" formControlName="education">
<ion-select-option disabled value="">Select one</ion-select-option>
<ion-select-option *ngFor="let education of educations" [value]="education">{{education}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label color="primary" position="floating">Job Title</ion-label>
<ion-input placeholder="Type here..." formControlName="job_title" type="text"></ion-input>
<div class="invalid" *ngIf="(isSubmit && !f.job_title.value) || (f.job_title.invalid && (f.job_title.dirty || f.job_title.touched))">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-item>
<ion-item>
<ion-label color="primary" position="floating">Experience</ion-label>
<ion-input placeholder="Type here..." formControlName="experience" type="text"></ion-input>
<div class="invalid" *ngIf="(isSubmit && !f.experience.value) || (f.experience.invalid && (f.experience.dirty || f.experience.touched))">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-item>
<ion-item>
<ion-label color="primary" position="floating">Short Bio</ion-label>
<ion-textarea placeholder="Type here..." formControlName="short_bio" rows="3">
</ion-textarea>
<div class="invalid" *ngIf="(isSubmit && !f.short_bio.value) || (f.short_bio.invalid && (f.short_bio.dirty || f.short_bio.touched))">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-item>
<ion-item>
<ion-label color="primary" position="floating">Address</ion-label>
<ion-textarea placeholder="Type here..." formControlName="address" rows="3">
</ion-textarea>
<div class="invalid" *ngIf="(isSubmit && !f.address.value) || (f.address.invalid && (f.address.dirty || f.address.touched))">
<ion-text color="danger">This field is required.</ion-text>
</div>
</ion-item>
</ion-list>
</form>
这张图片显示了完美的错误
当我们添加@gmail时，它不会显示有效字段
在添加点后，它显示错误
请帮助我解决这个问题。
回答 1
Stack Overflow用户
发布于 2021-05-31 17:12:32
Angular电子邮件验证器只是一个正则表达式检查，我相信这是它的RegExp：
^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$我想，将定制的.pattern验证器和.email验证器结合使用会导致一些冲突，这可能是不希望的。
如果您对^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$感到满意，我建议您只使用Angular .email验证器。如果你想要一些定制的东西，完全移除Angular .email验证器，并通过一个定制的RegExp验证器(即你已经启动的.pattern )处理所有的检查。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67768979
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号