提交和数据清除后AngularJS验证错误

Question

我已经以表格的形式实现了验证系统，并且工作正常。

这是我的表格：

    <form name='addContactForm'>

      <div class="form-group">
        <label for="userid">USER ID :</label><br>
        <input ng-model="formModel.userid" class="form-control" name="userid" restrict-input="{type: 'digitsOnly'}" required>
        <span style="color:red" ng-show="addContactForm.userid.$dirty && addContactForm.userid.$invalid">
            <span ng-show="addContactForm.userid.$error.required"> User is required.</span>
        <span ng-show="addContactForm.userid.$error.number">Invalid userID</span>
      </div>

      <div class="form-group">
        <label for="name">NAME :</label><br>
        <input ng-model="formModel.name" class="form-control" name="name" required/>
        <span style="color:red" ng-show="addContactForm.name.$dirty && addContactForm.name.$invalid">
            <span ng-show="addContactForm.name.$error.required"> Name is required.</span>
            <span ng-show="addContactForm.name.$error.lettersOnly">Invalid Name</span>
        </span>
      </div>

      <div class="form-group">
        <label for="email">Email :</label> <br>
        <input type="email" name="email" class="form-control" ng-model="formModel.email" ng-pattern="/[\w\d\.\_]+\@[\w\d]+\.[\w]{3}/" required>
        <span style="color:red" ng-show="addContactForm.email.$dirty && addContactForm.email.$invalid">
            <span ng-show="addContactForm.email.$error.required">Email is required.</span>
            <span ng-show="addContactForm.email.$error.pattern">Invalid email address.</span>
        </span>
      </div>

      <div class="form-group">
        <label for="phone">Phone :</label> <br>
        <input ng-model="formModel.phone" class="form-control" name="phone" restrict-input="{type: 'digitsOnly'}" required>
        <span style="color:red" ng-show="addContactForm.phone.$dirty && addContactForm.phone.$invalid">
            <span ng-show="addContactForm.phone.$error.required"> Phone Number is required.</span>
        </span>
      </div>

      <div class="row justify-content-center">
      <button class="btn btn-primary" ng-disabled="addContactForm.$invalid" ng-click="PassDataToDisplyThroughUrl()">Submit</button> <br>
      </div>

    </form>
  </div>

请注意，以上情况都可以正常工作。

我的控制器在下面：

app.controller('formCtrl', ['$scope', '$location', '$http',
function($scope, $location, $http) {
    $scope.formModel = {};
    $scope.PassDataToDisplyThroughUrl = function() {
        var url = 'display/' + $scope.formModel.userid + '/' + $scope.formModel.name
         + '/' + $scope.formModel.email + '/' + $scope.formModel.phone;
        $location.path(url);
        $http.post('http://127.0.0.1:8000/api/v1/contact/', $scope.formModel)
        .then(function(response){
            $scope.successCallBack = 'You have successfully saved your contact';
        }, function(response){
            $scope.errorCallBack = 'Opps! Unable to save your data, please check your network';
        });
    $scope.formModel = {};
    $scope.addContactForm.$setPristine();
    };
}]);

我单击提交按钮后-清除表单并发送到服务器。但是问题是，稍后它会向我显示验证错误

有人可以解决我这个问题吗？