1

私は、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 形式のときに実行されているかどうか疑問に思っています。

4

1 に答える 1

0

Angular 検証はng-model値に対して実行されます。つまり、次のようになります。

  • 値がビューに入力されると、$parsersが実行され、入力された値が に保存する方法に変換されますng-model。この場合、それは秒数を表す数値です。次に、ng-patternその値で動作します-検証に合格するng-modelと、設定されます。
  • コントローラーから値が設定されると、 はng-patternその生のng-model値で動作します。検証結果に関係なく、$formattersが実行され、フォーマットされたものがビューに送信されると思います。$viewValue

いずれにせよ、あなたの例でng-patternは、コントロールに表示されるフォーマットされた値ではなく、秒の整数値で動作します。

于 2014-12-16T22:46:01.533 に答える