Angular 离子5电子邮件反应式表单验证

我有一个奇怪的问题，因为我在爱奥尼亚的表现更好，但我陷入了一个简单的错误。我使用的是反应式表单，每次验证都很好，电子邮件验证也很好，但有一个小问题。我尝试了非常正则的表达式，但还是失败了

开门见山

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>

标题
此字段必填。
选择一个
{{title}}
全名
此字段必填。
电子邮件
请输入有效的电子邮件地址。
此字段必填。
国家
此字段必填。
选择一个
{{国家}
城市
此字段必填。
选择一个
{{城市}
时区
此字段必填。
选择一个
{{zone}}
手机号码
此字段必填。
请输入有效的手机号码。
教育类
此字段必填。
选择一个
{{教育}
职位名称
此字段必填。
经验
此字段必填。
短简历
此字段必填。
地址
此字段必填。

这张图片显示了完美的错误

当我们添加@gmail时，它没有显示有效字段

添加点后显示错误

---

请帮我解决这个问题。

Angular email validator只是一个正则表达式检查，我相信这是它的RegExp：

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

我认为将自定义的

.pattern

验证器和

.email

验证器组合使用会导致一些冲突，这可能是不希望的

---

如果您对

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

感到满意，我建议您只使用Angular

.email

验证器。如果您想要定制的东西，请完全删除Angular

.email

验证器，并通过定制的RegExp验证器（即您已经启动的

.pattern

）处理所有检查。

我尝试了所有方法，但仍然徒劳。谢谢你的回复