Question

我试图通过同时使用ng-pattern和ng-model解析来实现角度输入。我在ng-pattern中使用的正则表达式在regex101.com上运行正常，甚至在我的应用程序中记录它也很有用。然而，当它在ng-pattern中使用时，它说我的输入无效，尽管它不应该。我想知道ng-pattern什么时候与ngModel有关。$ parsers / ngModel。$ formatters正在做他们的事情，因为我可以看到它导致它失败。这是一些代码：

这里是ngModel解析指令：

UI.directive('formatSeconds', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {

            var padZero = function (num, size) {
                return ('00' + num).substr(-size);
            };

            var formatSeconds = function (seconds) {
                var min = Math.floor(seconds / 60);
                var sec = Math.floor(seconds % 60);
                var ms = Math.round(((seconds % 60) - sec) * 1000);
                return min + ':' + padZero(sec, 2) + ':' + padZero(ms, 3);
            };

            var parseTime = function (time) {
                time = time.split(':');
                var min = parseInt(time[0] || 0);
                var sec = parseInt(time[1] || 0);
                var ms = parseInt(time[2] || 0);
                return min * 60 + sec + (ms / 1000);
            };

            ngModel.$parsers.push(parseTime);
            ngModel.$formatters.push(formatSeconds);
        }
    };
});

这是我的控制器中的正则表达式：

$scope.timeRegex = /^([0-9]+)?\:([0-5][0-9])\:?([0-9]{3})?$/;

以下是我的观点的相关部分：

<tbody ng-form name="syncForm">
    <tr class="timing-entry" ng-repeat="entry in scenario.syncManifest">
        <td>
            <input type="text" ng-attr-name="{{'time' + $index}}" required ng-model="entry.time" format-seconds ng-pattern="timeRegex" />
        </td>
    </tr>
</tbody>

entry中的时间以秒为单位，因此格式化程序将其置于0：00：000格式。然后我希望ng-pattern会启动并说是！有效！但在解析之前，当时属性仍为0.000格式时，我想知道它是否正在运行。

Answer 1

对ng-model值执行角度验证，即：

当一个值输入到视图中时，$parsers将运行，输入的值将转换为您希望它存储在ng-model中的方式。在这种情况下，这是一个代表秒数的数字。然后，ng-pattern将对该值起作用 - 如果通过验证，则会设置ng-model。
当从控制器设置值时，ng-pattern将继续处理该原始ng-model值。我相信$formatters将会运行，格式化的$viewValue将被发送到视图，无论验证结果如何。

无论哪种方式 - 在您的示例中，ng-pattern将处理秒的整数值，而不是控件中显示的格式化值。

使用ng-pattern和ng-model解析/格式化

1 个答案: