How to prevent Angular trimming input value

I have the following code. The problem is it doesn't flag invalid when there is leading or trailing spaces. Then I print out the value and found that the surrounding spaces are automatically trimmed so it cannot be detected by the pattern validator. I can only find solution for AngularJS, but not Angular, is there any equivalent in Angular?

<input matInput #email="ngModel" name="email" [(ngModel)]="email" type="email" (ngModelChange)="onEmailChanged($event);"
[pattern]="emailRegex">


readonly emailregex = /^([-!#-'*+/-9=?A-Z^-~]+(\.[-!#-'*+/-9=?A-Z^-~]+)*|"([]!#-[^-~ \t]|(\\[\t -~]))+")@([0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?(\.[0-9A-Za-z]([0-9A-Za-z-]{0,61}[0-9A-Za-z])?)*|\[((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|IPv6(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){6}|:(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){5}|[0-9A-Fa-f]{0,4}:(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){4}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})?(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?:(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){3}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){0,2}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?:(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){2}|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){0,3}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?:0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}):|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){0,4}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?:((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})|(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3})|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){0,5}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?:0|[1-9A-Fa-f][0-9A-Fa-f]{0,3})|(((0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}){0,6}(0|[1-9A-Fa-f][0-9A-Fa-f]{0,3}))?:|(?!IPv6[0-9A-Za-z-]*[0-9A-Za-z]:[!-Z^-~]+)])$/;
email = "";

onEmailChanged(event:Event){
console.log("onEmailChanged", email);
}

Continue reading...