正则表达式在有效和无效之间交替

Question

我很确定这是我做错的事情，可以用另一双眼睛指出毫无疑问的代码错误。

我有一个组件位于mat-tab内部，并且是延迟加载的。在组件中，我有一个反应式的字段，如下所示。

我已经在environment.ts中定义了一个电子邮件验证器模式

export const environment = {
  ...
  validators: {
    // tslint:disable-next-line:max-line-length
    email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/gi
  }
}

窗体是在组件构造函数中定义的：

this.form = this.fb.group({
  ...
  'primary_contact': this.fb.group({
    'name': [''],
    'email': ['', { validators: [Validators.required, Validators.pattern(environment.validators.email)], updateOn: 'blur' }],
    'phone': ['']
  }),
  ...
});

然后使用输入变量在ngOnInit中填充表单：

@Input() tenant: Tenant;

ngOnInit() {
  this.form.patchValue({
    ...this.tenant
  });
  this.form.updateValueAndValidity();
}

最后在模板中，我有以下内容：

<div fxFlex fxLayout="row wrap" fxLayout.xs="column wrap" fxLayoutGap="24px grid" formGroupName="primary_contact”>
  ...
  <div fxFlex="50">
    <mat-form-field class="full-width">
      <mat-label>Primary Contact Phone</mat-label>
      <input matInput type="tel" formControlName="phone" />
    </mat-form-field>
  </div>
  ...
</div>
<mat-divider></mat-divider>
<div class="form-actions">
  <button mat-flat-button color="primary" [disabled]="form.invalid" (click)="onSaveChanges()">Save changes</button>
  <a mat-button [routerLink]="['../../']">Cancel</a>
</div>

由于我的问题，当组件加载表单时，表单可以是有效或无效，并且在两个选项卡之间切换时，该字段将在有效/无效状态之间切换。

任何人都可以看到我在做什么错吗？

我有一个stackblitz here，它复制了我所遇到的问题。

已更新

因此，在查看了Angular电子邮件验证程序并剥离了示例之后，我发现以下内容似乎表明正则表达式本身存在问题。请参见下面的两个代码片段，如果您使用我的正则表达式运行它们，而第二个片段与来自角度验证器的正则表达式一起运行，则会得到不同的结果

从上方使用正则表达式

const re1 = new RegExp(/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/gi);
for (let i = 0; i < 10; i++) {
  console.log(re1.test('test@gmail.com'));
}

使用来自Angular电子邮件验证程序的正则表达式

const re2 = new RegExp(/^(?=.{1,254}$)(?=.{1,64}@)[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+(\.[-!#$%&'*+/0-9=?A-Z^_`a-z{|}~]+)*@[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?(\.[A-Za-z0-9]([A-Za-z0-9-]{0,61}[A-Za-z0-9])?)*$/);
for (let i = 0; i < 10; i++) {
  console.log(re2.test('test@gmail.com'));
}

所以要更新这个问题，为什么我的正则表达式测试在有效和无效之间交替？