提交Angular JS后如何关闭表单

时间:2018-11-17 16:59:33

标签: html angularjs

我正在尝试使用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

2 个答案:

答案 0 :(得分:0)

我是否正确理解-您想在0之后清除k[i]并添加用户? 如果是这样,您可以设置清除功能,该功能将清除所有f(x) = sum(i in [1:n]) sum(j in [0:k[i]]) y[i][j] * l[i][j](x)数据,如下所示:

l[i][j](x) = (x - x[i])^j * prod(t in [1:n], t != i) ((x - x[t]) / (x[i] - x[t]))^k[t]

HTML:

form

编辑: 添加到您的提交按钮submit 还要为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; } 添加<button type="submit" class="btn btn-default" ng-click="formSubmit(user);clearSearch()" >Submit</button>

data-dismiss="modal"

朋克:http://plnkr.co/edit/tulZ7L9RH69kMt6bDEgt?p=preview

答案 1 :(得分:0)

删除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属性时,浏览器将从服务器重新加载整个页面。这将重新启动应用程序及其控制器,从而清除表单。

有关更多信息,请参见