The form input validations are automatically triggering when the Angular 6 App is opening on IE 11, even though I did't touch any form input fields. I updated the polyfills.ts file for Internet Explorer support but didn't work as expected. For all other browsers it's working fine, only in Internet Explorer 11 it's not loading the Angular app properly.
I try with the following
// 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';
Is there any way to restrict the auto trigger of form input validations when the Angular 6 App is opening on IE 11. Please suggest me on this if anyone have any idea on this.
Thanks in advance.