Ошибка проверки 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();
    };
}]);

После того, как я нажму кнопку «Отправить» - очистите форму и отправьте на сервер. но проблема в том, что она показывает ошибку проверки позже

Может кто-нибудь решить эту проблему?