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

首先，给我们您当前的angularjs版本。您的html示例中缺少什么吗？根据您的样本，您应该不会看到任何错误或红色边框。我尝试了，一切顺利。给我们一个更完整的示例。

Answer 2

1）您需要以形式调用函数并将事件作为参数传递。

2）使按钮类型为“提交”。

3）在函数内部，执行完所有代码后，您需要添加 event.form.reset（）;

AngularJS清理表单并确保在发生次弥散后出现验证错误

2 个答案: