Question

这里我在提交表单时使用AngularJs的Bootstrap验证重置了列，但它显示了所有验证。但我的目标是它不应该显示验证

Bootstrap

<div class="modal" id="modal1">
        <div class="modal-dialog">
            <div class="modal-content">
              <form name="f1" novalidate ng-submit="Save(Auth.emp)">
                    <div class="modal-body">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        Email
                                    </div>
                                    <div class="col-sm-8">
                                        <input type="text" name="email" class="form-control" ng-model="Auth.Email" ng-class="Submitted?'ng-dirty':''" required />
                                        <span class="Error" ng-show="(f1.email.$dirty ||Submitted) && f1.email.$error.required">Email REq</span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="row">
                                    <div class="col-sm-4">
                                        Password
                                    </div>
                                    <div class="col-sm-8">
                                        <input type="text" name="psw" class="form-control" ng-model="Auth.Password" ng-class="Submitted?'ng-dirty':''" required />
                                        <span class="Error" ng-show="(f1.psw.$dirty ||Submitted) && f1.psw.$error.required">Password REq</span>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="modal-footer">
                        <input type="submit" value="{{LoginAction}}" />
                    </div>
                </form>

            </div>
        </div>
    </div>

AngularCode.Js

$scope.Save = function (emp) {
        if ($scope.LoginAction = "Login") {
            $scope.Submitted = true;
            if ($scope.isFormValid == true) {
                var ss = {
                    Email: $scope.Auth.Email,
                    Password: $scope.Auth.Password,
                }
                var xxer = myServices.GetLogin(ss);
                xxer.then(function (msg) {
                    $scope.msg = msg.data;
                    $('#modal2').modal('show')
                     Reset();
                })

            }
        }
    }

重置

function Reset() {
        $scope.Email = '';
        $scope.Password = '';

    }

Answer 1

我认为你在寻找这个：

function Reset() {
     $scope.Auth.Email = ''
     $scope.Auth.Password = '';
}

Answer 2

您可以将模型设置为与表单标记相同的级别，并使所有其他输入子属性。然后在单击重置时将根级别的表单模型设置为空对象。这是codepen。

＆＃13;

function exampleController($scope) {
  $scope.reset = function() {
    $scope.form = {};
  };
}
angular
  .module('app', [])
  .controller('exampleController', exampleController);

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

<div class="row" ng-app="app" ng-controller="exampleController">
  <form novalidate ng-model="form">
    <input ng-model="form.email" type="email" />
    <input ng-model="form.password" type="password" />
  </form>
  <button ng-click="reset()">Reset</button>
  <pre>{{form}}</pre>
</div>

＆＃13;

如何重置Bootstrap表单

2 个答案: