Question

所以我最近接手了Angular Giving表格申请表。我正在使用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”，但是当用户输入两个（。）句点时，该字段会立即被删除。

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

Answer 1

此行为是由本节引起的

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

通过Angular文档

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

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

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

1 个答案: