angular - 在角度应用中自动触发 IE 10/11 的角度材料错误状态匹配器

Question

当 Angular 6 App 在 IE 11 上打开时，表单输入验证会自动触发，即使我没有触摸任何表单输入字段。我更新了 polyfills.ts 文件以支持 Internet Explorer，但没有按预期工作。对于所有其他浏览器，它工作正常，只有在 Internet Explorer 11 中它没有正确加载 Angular 应用程序。

我尝试以下

// Custom Error State Matcher

import { FormControl, FormGroupDirective, NgForm } from 
"@angular/forms";
import { ErrorStateMatcher } from "@angular/material/core";

export class CustomErrorStateMatcher implements ErrorStateMatcher { isErrorState(control: FormControl | null, form: FormGroupDirective | NgForm | null): boolean { const isSubmitted = form && form.submitted; return !!(control && control.invalid && (control.dirty || control.touched || isSubmitted)); } }

//test.component.ts

 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { CustomErrorStateMatcher } from '../error-control';

 @Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
   styleUrls: ['./test.component.css']
  })
 export class TestComponent implements OnInit {
 exampleForm: FormGroup;
 matcher = new CustomErrorStateMatcher();
 constructor(private fb: FormBuilder) { }

 ngOnInit() {
 this.exampleForm = this.fb.group({
  firstName: ['', [Validators.required]],
  lastName: ['', [Validators.required]],
  email: ['', [Validators.required, Validators.email]]
 });
}
 examleFormSubmit() {
return false;
 }
} 

//test.component.html
div class="container">
 <form [formGroup]="exampleForm" (ngSubmit)="examleFormSubmit()">
<mat-form-field appearance="outline" [hideRequiredMarker]="true">
  <mat-label>First Name</mat-label>
  <input type="text" matInput placeholder="Enter first name" formControlName="firstName" [errorStateMatcher]="matcher">
</mat-form-field>
<mat-form-field appearance="outline" [hideRequiredMarker]="true">
  <mat-label>Email Address</mat-label>
  <input type="text" matInput placeholder="Enter last name" formControlName="lastName" [errorStateMatcher]="matcher">
</mat-form-field>
<mat-form-field appearance="outline" [hideRequiredMarker]="true">
  <mat-label>Email Address</mat-label>
  <input type="email" matInput placeholder="Enter email address" formControlName="email" [errorStateMatcher]="matcher">
</mat-form-field>

<div class="submit-form">
  <button type="submit" mat-raised-button class="submit-button"> . 
 <span>Submit</span></button>
</div>
</form>
</div>

//Updated polyfills.ts(for Internet Explorer 11 support)

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
import 'core-js/es6/symbol';
import 'core-js/es6/object';
import 'core-js/es6/function';
import 'core-js/es6/parse-int';
import 'core-js/es6/parse-float';
import 'core-js/es6/number';
import 'core-js/es6/math';
import 'core-js/es6/string';
import 'core-js/es6/date';
import 'core-js/es6/array';
import 'core-js/es6/regexp';
import 'core-js/es6/map';
import 'core-js/es6/weak-map';
import 'core-js/es6/set';

/** IE10 and IE11 requires the following for NgClass support on SVG 
  elements */
 import 'classlist.js';

/** IE10 and IE11 requires the following for the Reflect API. */
import 'core-js/es6/reflect';
import 'core-js/es7/reflect';

`@angular/platform-browser/animations`
 import 'web-animations-js'; 
 import 'zone.js/dist/zone';

当 Angular 6 App 在 IE 11 上打开时，有什么方法可以限制表单输入验证的自动触发。如果有人对此有任何想法，请向我提出建议。

提前致谢。

标签： angularangular6angular-material2angular-formsangular-material-6