AngularJS очищает форму и обеспечивает ошибку проверки после отправки

Question

Я сталкиваюсь со странной ситуацией. У меня есть форма angularJS, и я успешно реализовал ее, чтобы она была понятна после отправки и чтобы моя ошибка проверки не отображалась, она работала хорошо, но после отправки она отображала красную границу, которая является признаком ошибки, которого я не хочу.

вот вам моя форма:

<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>
        </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>

и вот вам мой контроллер:

app.controller('addCtrl', ['$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(); 
    }; 
}]);

Это работает нормально, чтобы удалить ошибку проверки после очистки отправки, я добавил это $scope.addContactForm.$setPristine();, и это работает, но единственная проблема, после отправки, форма, покрытая красной рамкой, которую я не реализовал, как я могу удалить эту ошибку?

Если вы не получили мои слова, вы можете запустить этот код на своем компьютере, и попытаться заполнить форму и отправить, вы увидите эту ошибку.

если вы поняли мои слова, подскажите, пожалуйста, где ошибка?

Answer 1

1) Вам нужно вызвать функцию в форме и передать событие в качестве параметра.

2) make button type = "submit".

3) Внутри функции после всего выполнения кода вам нужно добавить event.form.reset ();

Answer 2

Прежде всего, дайте нам вашу текущую версию angularjs. Чего-то не хватает в вашем образце HTML? Основываясь на вашем примере, вы не должны видеть никаких ошибок или красной границы. Я попробовал и все прошло хорошо. Дайте нам более полный образец.