角度形式验证更正

Question

此处Fiddle Link

更新 - ＆GT;通过设置ng-model-options可以很好地使用角度1.3，但我使用的是1.2 :( 这是Fiddle Link

目前，当用户点击提交错误时，一旦输入有效输入，它就会消失。但我想要的不是在用户输入有效信息时隐藏错误。如果用户重新输入正确的数据错误，只有在点击提交按钮时才会消失。

HTML

<div ng-app="app" ng-controller="MainCtrl">
<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">Order Form</h4>
        </div>
        <div class="panel-body">
            <ng-include src="'form.html'"></ng-include>
        </div>
    </div>
</div>

<!-- kept seperate from the bootstrap markup to keep this example clean -->
<script type="text/ng-template" id="form.html">
    <form name="form" valid-submit="sendForm()" novalidate>
        <!-- call name-->
      <div class="form-group clearfix" ng-class="{
                'has-error': form.$submitted && form.orderNumber.$invalid,
                'has-success': form.$submitted && form.orderNumber.$valid}">
            <label class="col-sm-2 control-label" for="callName">Order Number</label>
            <div class="col-sm-5">
                <input id="orderNumber" name="orderNumber" class="form-control" type="text" ng-model="auth.orderNumber" ng-minlength="7" ng-maxlength="10" ng-pattern="/^[0-9]*$/" required ></input>
                <div class="alert alert-danger" ng-show="form.$submitted && form.orderNumber.$error.required">Order Number required</div>
  <span  ng-show="form.$submitted && form.orderNumber.$error.pattern" class="help-block">Order number contains only numbers</span>
  <span  ng-show="form.$submitted && form.orderNumber.$error.minlength " class="help-block">Order number is too short</span>
  <span  ng-show="form.$submitted && form.orderNumber.$error.maxlength" class="help-block">Order number is too long</span>

            </div>
        </div>
        <!-- last name-->
        <div class="form-group clearfix" ng-class="{
                'has-error': form.$submitted && form.confirmorderNumber.$invalid,
                'has-success': form.$submitted && form.confirmorderNumber.$valid}">
            <label class="col-sm-2 control-label" for="confirmorderNumber">Confirm Order Number</label>
            <div class="col-sm-5">
       <input id="lastName" name="confirmorderNumber" class="form-control" type="text" ng-model="person.lastName" data-match="auth.orderNumber" required></input>
                <div class="alert alert-danger" ng-show="form.$submitted && form.confirmorderNumber.$error.required">required</div>
        <span  ng-show="form.$submitted && form.confirmorderNumber.$error.match" class="help-block">Order numbers must match</span>

            </div>
        </div>
        <!-- form controls-->
        <div class="form-group">
            <button type="submit" class="btn btn-primary">Submit!</button>
        </div>
    </form>
</script>
</div>

js

 var app = angular.module('app', []);

 // directive that prevents submit if there are still form errors
 app.directive('validSubmit', [ '$parse', function($parse) {
    return {
        // we need a form controller to be on the same element as this directive
        // in other words: this directive can only be used on a <form>
        require: 'form',
        // one time action per form
        link: function(scope, element, iAttrs, form) {
            form.$submitted = false;
            // get a hold of the function that handles submission when form is valid
            var fn = $parse(iAttrs.validSubmit);

            // register DOM event handler and wire into Angular's lifecycle with scope.$apply
            element.on('submit', function(event) {
                scope.$apply(function() {
                    // on submit event, set submitted to true (like the previous trick)
                    form.$submitted = true;
                    // if form is valid, execute the submission handler function and reset form submission state
                    if (form.$valid) {
                        fn(scope, { $event : event });
                        //form.$submitted = false;
                    }
                });
            });
        }
    };
}
  ]);
  app.directive('match', function () {
return {
    require: 'ngModel',
    restrict: 'A',
    scope: {
        match: '='
    },
    link: function(scope, elem, attrs, ctrl) {
        scope.$watch(function() {
            var modelValue = ctrl.$modelValue || ctrl.$$invalidModelValue;
            return (ctrl.$pristine && angular.isUndefined(modelValue)) || scope.match === modelValue;
        }, function(currentValue) {
            ctrl.$setValidity('match', currentValue);
        });
    }
};
 });

 // handle form submission when the form is completely valid
 app.controller('MainCtrl', function($scope) {
 $scope.sendForm = function() {
alert('form valid, sending request...');
 };
});