Question

我正在建立一个Angular指令，允许用户以各种常见格式输入北美电话号码（例如＆＃34; 1（301）797-1483＆＃34;或＆＃34 ; 301.797.1483＆＃34;），但在内部将其作为标准化数字存储在＆＃34; 3017971483＆＃34;。

我让$parser正常工作：它会在用户输入时删除所有非数字字符，如果它是＆＃34; 1＆＃34;则剥离第一个字符。但是，我想为此添加验证，例如：

如果$parser无法将当前$viewValue转换为有效的标准化数字（即，因为它不足够包含数字，或包含不可接受的垃圾字符），然后：
- $modelValue将为空; 和
- ModelController的$valid / $invalid标志将被适当设置，其$error.pattern属性将设置为true。（我想它不会成为pattern，但这似乎是明智之举。）

这基本上是Angular通过pattern和required等属性处理默认验证的方式。但我有一段时间想知道如何使用我的指示工作。

我的代码如下;你也可以view this on CodePen。这是我的HTML：

<div ng-app="DemoApp">

  <form ng-controller="MainController" name="phoneForm">

    <input phone-input type="tel" name="phone" ng-model="phone">
    <p ng-show="phoneForm.phone.$error.pattern">Invalid format!</p>

    <p>$viewValue is: {{ phoneForm.phone.$viewValue }}</p>
    <p>$modelValue is: {{ phone }}</p>

  </form>

</div>

这是我的JavaScript：

angular
.module( 'DemoApp', [] )
.controller( 'MainController', [ '$scope', function( $scope ) {

  $scope.phone = '';

} ] )
.directive( 'phoneInput', function() {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function( scope, $el, attrs, ngModel ) {

            // convert human-friendly input to normalized format for internal storage
            ngModel.$parsers.push( function( value ) {
                return normalizePhone( value );
            } );

            function normalizePhone( phone ) {

                // remove all non-numeric characters
                phone = phone.replace( /[^0-9]/g, '' );

                // if the first character is a "1", remove it
                if ( phone[0] === '1' ) {
                    phone = phone.substr( 1 );
                }

                return phone;

            }

        }
    };
} );

如果您使用该表单，您会注意到＆＃34;格式无效！＆＃34;消息永远不会显示。 我不希望此代码显示 - 这就是我试图弄清楚如何干净利落的行为。

我已经有了一个可靠的正则表达式，用于确定$viewValue是否可以转换为有效数字 - 例如，＆＃34; 1（301）797-1483＆＃34;通过正则表达式，但＆＃34; 1（301）797-148＆＃34;才不是。我想弄清楚的是在何时/何时/如何执行此检查，以及何时/何时/如何将模型标记为无效。

只需将pattern="^regex_goes_here$"添加到我的<input>无法正常工作 - 在规范化后检查 $modelValue 的格式，这不是我的意思想。

我尝试了很多不同的事情，但没有什么能像我想要的那样表现，而且我现在也没有想法。

＆＃34;对＆＃34;是什么？将$parser与$validator结合起来的方法？当然，已经确定了这种模式。

Answer 1

传递给$ Results的方法接收$ modelValue和$ viewValue作为参数，这意味着您可以实际验证它们（validators - 输入一些字母）：

{{1}}

如何将Angular $ parser与$ validator结合起来？

1 个答案: