如何阻止Angular自动修剪输入框的值？

我太懂你这个烦恼了！Angular的ngModel默认会悄悄把输入值的前后空格给修剪掉，难怪你打印出来的内容看不到空格，正则验证自然也抓不到这种无效情况——之前用AngularJS的方法确实不适用现在的Angular版本，我给你说两个直接能用的解决方案：

一、关闭ngModel的自动修剪（最直接） #

Angular从6.x版本开始，ngModel支持通过ngModelOptions来关闭自动修剪功能，你只需要在input标签里加一行配置就行：

修改后的input代码：

<input matInput #email="ngModel" name="email" [(ngModel)]="email" type="email" 
       (ngModelChange)="onEmailChanged($event);"
       [pattern]="emailRegex"
       [ngModelOptions]="{ trim: false }">

这样设置后，Angular就不会再自动处理输入的前后空格了，用户输入的所有内容（包括前后空格）都会原封不动地存在email变量里，你的正则因为是从^开头到$结尾的全匹配，就能准确识别出带前后空格的邮箱格式，标记为无效状态。

二、小提醒：变量名要统一哦 #

我注意到你TS里的正则变量名是emailregex（小写r），但模板里写的是emailRegex（大写R），这会导致模板找不到正则表达式，记得把两者改成一致的（比如都改成emailRegex），不然验证根本不会生效~

测试一下 #

修改完之后，你输入 test@example.com 这种带前后空格的内容，onEmailChanged里打印的就会是完整的带空格的字符串，正则会正确判定为无效，完美解决你的问题！

备注：内容来源于stack exchange，提问作者Ricky Mo