Ionic 5 电子邮件反应式表单验证答案

【问题标题】：Ionic 5 email Reactive form validationIonic 5 电子邮件反应式表单验证
【发布时间】：2021-08-18 11:30:01
【问题描述】：

我有一个奇怪的问题，因为我在 ionic 方面做得更好，但我遇到了一个简单的错误。我正在使用响应式表单，每次验证都运行良好电子邮件验证运行良好，但有一个小故障。我尝试了非常正则表达式但仍然失败。

进入正题。

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 时，它没有显示有效字段

添加点后显示错误

请帮我解决这个问题。

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

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）处理所有检查。

【讨论】：

我尝试了一切，但仍然徒劳无功。感谢您的回复

【解决方案2】：

你试过这个吗？

'^[a-z0-9._%+-]+@[a-z0-9.-]+\\.[a-z]{2,4}$'

【讨论】：

这是和去年一样的正则表达式。
这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review
不一样，仔细看
我做到了。此字符串编译为相同的 RegExp。 Try it online!
不是 ionic/angular，我今天早上刚刚在应用升级中应用了它，它在那里运行良好。