提交Angular JS后如何关闭表单

Question

我正在尝试使用 Angular JS 对表单进行验证。该代码部分工作。除非我添加填写所有文本框，否则提交按钮将保持禁用状态。当我不填写文本框时，也会显示错误消息。

我的问题是，当我填满所有文本框并单击提交时，用户被添加，但所有文本框都清除并显示错误消息。如何在单击提交按钮时强制关闭表单？提前致谢。

 if ($scope.addForm.$valid) {
        alert('all inputs are valid ');
    }
    else {
        alert('all inputs are not valid ');
    }

    $scope.saveUser = function () {
        console.log("Saving...");
        $scope.users.push($scope.newUser);
        $scope.info = "New User Added Successfully!";
        $scope.newUser = {};
        localStorage.setItem("users", JSON.stringify($scope.users));
    };

<div class="modal-body">
    <form name="addForm"class="form-horizontal" action="/action_page.php" novalidate>

        <div class="form-group">
            <label class="control-label col-sm-2">Email</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addEmail.$invalid && !addForm.addEmail.$pristine }">
                <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" ng-model="newUser.email" ng-required="true">
                <span class="help-block" ng-show="addForm.addEmail.$invalid && !addForm.addEmail.$pristine">
                    Your Email is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Password</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addPassword.$invalid && !addForm.addPassword.$pristine }">
                <input type="password" class="form-control" name="addPassword" placeholder="Enter New Password" ng-model="newUser.password" ng-required="true">
                <span class="help-block" ng-show="addForm.addPassword.$invalid && !addForm.addPassword.$pristine">
                    Your Password is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">First Name</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addFirstName.$invalid && !addForm.addFirstName.$pristine }">
                <input type="text" class="form-control" name="addFirstName" placeholder="Enter First Name" ng-model="newUser.firstName" ng-required="true">
                <span class="help-block" ng-show="addForm.addFirstName.$invalid && !addForm.addFirstName.$pristine">
                    Your First Name is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Last Name</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addLastName.$invalid && !addForm.addLastName.$pristine }">
                <input type="text" class="form-control" name="addLastName" placeholder="Enter Last Name" ng-model="newUser.lastName" ng-required="true">
                <span class="help-block" ng-show="addForm.addLastName.$invalid && !addForm.addLastName.$pristine">
                    Your Last Name is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Contact</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addContact.$invalid && !addForm.addContact.$pristine }">
                <input type="tel" class="form-control" name="addContact" placeholder="Enter Contact" ng-model="newUser.contact" ng-required="true">
                <span class="help-block" ng-show="addForm.addContact.$invalid && !addForm.addContact.$pristine">
                    Your Contact is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Role</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addRole.$invalid && !addForm.addRole.$pristine }">
                <input type="text" class="form-control" name="addRole" placeholder="Enter Role" ng-model="newUser.role" ng-required="true">
                <span class="help-block" ng-show="addForm.addRole.$invalid && !addForm.addRole.$pristine">
                    Your Role is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <label class="control-label col-sm-2">Company</label>
            <div class="col-sm-10" ng-class="{ 'has-error' : addForm.addCompany.$invalid && !addForm.addCompany.$pristine }">
                <select class="form-control" name="addCompany" placeholder="Select Company" ng-options="company for company in companies" ng-model="newUser.company" ng-required="true">
                </select>
                <span class="help-block" ng-show="addForm.addCompany.$invalid && !addForm.addCompany.$pristine">
                    Your Company is required.
                </span>
            </div>
        </div>

        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
                <button type="submit" class="btn btn-default" ng-disabled="!addForm.$valid" ng-click="saveUser()" data-dismiss="modal">Submit</button>
            </div>
        </div>
    </form>
</div>

---

更新

嗯，现在看看我的代码：一切正常plnkr.co/edit/61khc9EEKZYFvTiTFb3i?p=preview

Answer 1

我理解正确吗？您想在submit 之后清除form 并添加用户？ 如果是这样，你可以做 clear 函数，它将清除所有ng-model 数据，如下所示：

   $scope.formSubmit = function (user){
     $scope.users = [];
     console.log(user)
     $scope.users.push(user);
     console.log("Users",$scope.users)
}
$scope.clearSearch = function() {
   $scope.user = null;
}

HTML：

<button type="submit" class="btn btn-default" ng-click="formSubmit(user);clearSearch()" >Submit</button>

编辑： 添加到您的提交按钮data-dismiss="modal" 还要为valid inputs 添加ng-if ：

 <div class="modal-body">
                 <form name="addForm"class="form-horizontal" novalidate>
          <h2 class="form-signin-heading">Please sign in</h2>
          <div class="form-group">
            <input type="email" class="form-control" name="addEmail" placeholder="Enter Email" data-ng-model="user.email ">
          </div>
          <div class="form-group">
            <input class="form-control" placeholder="Password" type="password" data-ng-model="user.password" >
          </div>

            <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
             <button type="submit"  class="btn btn-default" ng-click="formSubmit(user);clearSearch()" data-dismiss="modal">Submit</button>
          </div>
          </div>
          </form>
      </div>

plunker：http://plnkr.co/edit/tulZ7L9RH69kMt6bDEgt?p=preview

Answer 2

删除action属性并使用$http服务提交数据：

<form name="addForm"class="form-horizontal" ̶a̶c̶t̶i̶o̶n̶=̶"̶/̶a̶c̶t̶i̶o̶n̶_̶p̶a̶g̶e̶.̶p̶h̶p̶"̶  novalidate>

    <div class="form-group">
        <label class="control-label col-sm-2">Email</label>
        <div class="col-sm-10"
             ng-class="{ 'has-error' : addForm.addEmail.$invalid && !addForm.addEmail.$pristine }">
            <input type="email" class="form-control" name="addEmail"
                   placeholder="Enter Email" ng-model="newUser.email"
                   ng-required="true">
            <span class="help-block"
                  ng-show="addForm.addEmail.$invalid && !addForm.addEmail.$pristine">
                Your Email is required.
            </span>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default"
                    ng-disabled="!addForm.$valid"
                    ng-click="saveUser()" data-dismiss="modal">
              Submit
            </button>
        </div>
    </div>
</form>

当表单具有action 属性时，浏览器会从服务器重新加载整个页面。这将重新启动应用程序及其控制器，从而清除表单。

有关详细信息，请参阅

• AngularJS <form> Directive API Reference - Submitting a form and preventing the default action
• AngularJS Developer Guide - Forms