Angular 在验证失败时使输入字段为空

Posted 2023-02-23

【中文标题】Angular 在验证失败时使输入字段为空

【英文标题】：Angular making input field null on validation failure

【发布时间】：2014-02-06 10:45:22

【问题描述】：

我正在创建一个会员注册表单，他在其中输入他的会员卡号。会员卡号是一个 19 位数字，以 6 个 4 开头，然后是 13 位数字。现在用户可以选择单独输入最后 13 位数字，甚至可以输入完整的 19 位数字。当他在模糊事件中输入完整的 19 位数字时，我会修剪第 6 位数字，留下最后 13 位数字。我的代码适用于所有场景，但在 1 个特定场景中发生错误时会发生一些奇怪的事情。

工作场景是

如果用户键入的内容少于 13 位或多于 19 位，我有一个正则表达式来验证用户输入并显示错误消息。 如果用户只输入 13 位数字，没问题 如果用户输入完美的 19 位数字，但他的起始 6 位数字不是 4，则会显示错误。

失败的场景

但是当用户输入任何数字 >13 和 这是 Angular 库问题吗

请在下面找到代码-

html

    <input type="text" ng-model="user.CardNumber" ng-blur="trimCardNumber()" ng-required="true" ng-pattern="/^[0-9]13,19$/" name="CardNumber">

控制器.JS

    $scope.trimCardNumber = function () 
    if (($scope.user.CardNumber).indexOf("444444") > -1) 
        $scope.user.CardNumber = ($scope.user.CardNumber).replace("444444", "");
        $scope._ServerForm.CardNumber.$invalid = false;
        return true;
    
    else if ($scope.user.CardNumber.length != 13) 
        $scope._ServerForm.CardNumber.$invalid = true;
    
    else 
        $scope._ServerForm.CardNumber.$invalid = false;
    

我已经为这个问题创建了一个 JS fiddle - http://jsfiddle.net/achyut/x69hZ/1/

复制步骤 -

输入 444444123456789012 并模糊以查看问题

【问题讨论】：

是否有可能在代码中的某个地方重新初始化 user.CardNumber 的模型？

只有第一个数字是 4 的时候才会发生失败的情况？

@AlexanderNenkov - 在 Trim 函数中，我正在为模型重新分配修剪后的值

@Bertrand - 问题发生在修剪发生且正则表达式失败后

【参考方案1】：

这个问题在下面的帖子中讨论

input not showing invalid model values

您可以创建自定义指令并相应地对其进行验证。

【参考方案2】：

这是因为摘要循环的工作方式。

当出现模糊时，trimCardNumber() 会从输入中删除六个 4。

$scope.user.CardNumber = $scope.user.CardNumber.replace("444444", "");

由于在摘要周期中发生了某些变化，它变得脏了，因此触发了第二轮。在第二轮中，输入现在的位数较少，这导致正则表达式使其无效并清理 user.CardNumber 模型。

例如此卡号（19 位）将失败：4444441111111111111，因为删除 4 后它将被正则表达式无效。

如果您将正则表达式更改为接受 12 到 19，则上面的数字将起作用，但 18 长的数字也会失败。

这是fiddle

我认为解决方案是将正则表达式移动到 trimCardNumber() 中，或者更好的是，您可以为输入创建一个 custom validation。

【讨论】：

1 个疑问 - 您说正则表达式使输入标签无效并清理 user.CardNumber 模型。这正是我的问题。 Angular JS 的这种预期行为是否会在正则表达式失败时清理模型。然后，当我只输入 2 个数字并模糊时，它也应该这样做。在这种情况下，正则表达式也失败了

它清理模型，并且由于双向绑定，输入也被清除（再次，因为脏检查）。检查此fiddle。我在用户上设置了一个 $watcher，从一个有效的卡号开始，然后观察你的控制台。如果正则表达式有效，则用户接收输入的值，在卡号中输入一个字母（因此正则表达式使其无效），模型将被清除。

@Sai 提到这是一个已知问题github.com/angular/angular.js/issues/1412