Angular中电子邮件验证的删除错误答案

【问题标题】：Deletion Error with Email Validation in AngularAngular中电子邮件验证的删除错误
【发布时间】：2017-03-08 01:04:14
【问题描述】：

所以我最近接手了一个 Angular Giving Form Application。我正在使用 ng-pattern 在电子邮件字段上运行验证，并使用 ngMessages 显示模糊错误。验证效果很好，但是一旦验证通过 $valid 如果用户决定他们需要更改他们的电子邮件并开始删除第一次删除的一部分，则会按预期删除电子邮件的最后一个字符，但第二次删除会删除整个字段迫使用户从头开始。

正在使用变量 $scope.emailre 在控制器范围内设置 ng-pattern 的正则表达式

这些文件太大了，无法放在这里，但这里是我正在为我的客户工作的网站的链接。 https://epiqa.moodyglobal.org/corporate/

Angular 控制器片段：

myApp.controller('mainCtrl', function($scope, localStorageService, $http) {
$scope.emailre = /^(([^<>()\[\]\\.,;:\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,}))$/;

HTML 表单片段：

<div class="row form-group">
    <div class="col-sm-6">
        <div>
            <label class="label" for="txt_donorEmail">E-mail:</label>
            <input  ng-class="{ 'submitted-error' : givingForm.email.$invalid && submitted }" ng-model="email" type="text" id="email" name="email" class="textbox required full form-control" maxlength="50" ng-pattern="emailre" required />
        </div>
        <div ng-messages="givingForm.email.$error" ng-if="givingForm.email.$touched || submitted">
            <div class="errorText" ng-message="required">This field is required</div>
            <div class="errorText" ng-message="pattern">Enter a valid email</div>
        </div>
    </div>
</div>

我曾尝试将输入类型从 type="text" 更改为 type="email"，但是当用户输入两个 (.) 句点时，该字段会立即被删除。

请帮助任何想法都非常欢迎。

【问题讨论】：

标签： angularjs validation email

【解决方案1】：

该行为是由本节引起的

$scope.$watch('email', function(value){
  localStorageService.set('email',value);
  $scope.emailValue = localStorageService.get('email');
});

通过 Angular 文档

ngModel 中的默认行为是，当验证确定值无效时，模型值设置为 undefined。通过将allowInvalid属性设置为true，即使值无效，模型仍然会更新。

不过，我不确定您是否要将无效电子邮件保存到 localStorage。也许您可以在值有效时添加仅检查更新。

【讨论】：