[英]How to close the form after submit Angular JS
I am trying to use validation for the form using Angular JS. 我正在尝试使用Angular JS对表单进行验证。 The code works partially.
该代码部分起作用。 The submit button remains disabled unless I add fill up all the text boxes.
除非我添加填写所有文本框,否则提交按钮将保持禁用状态。 Error messages also gets displayed when I don't fill a text box.
当我不填写文本框时,也会显示错误消息。
My problem is ,when I fill up all the text boxes and click submit, the user gets added, but all the text boxes clear up and displays error messages. 我的问题是 ,当我填满所有文本框并单击提交时,就会添加用户,但是所有文本框都会清除并显示错误消息。 How do I force close the form on clicking the submit button?
单击提交按钮时,如何强制关闭表单? Thanks in advance.
提前致谢。
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>
hmm, look at my code here now: everything looks ok plnkr.co/edit/61khc9EEKZYFvTiTFb3i?p=preview 嗯,现在在这里查看我的代码:一切看起来都很好plnkr.co/edit/61khc9EEKZYFvTiTFb3i?p=preview
Do i understand correctly - you want to clear form
after submit
and add user? 我是否正确理解-您要在
submit
并添加用户后清除form
? If so, you can make clear function, which will clear all ng-model
data, like here: 如果是这样,您可以设置清除功能,该功能将清除所有
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: HTML:
<button type="submit" class="btn btn-default" ng-click="formSubmit(user);clearSearch()" >Submit</button>
EDIT: Add to your submit button data-dismiss="modal"
Also add ng-if
for valid
inputs
: 编辑:添加到您的提交按钮
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 塞子: http ://plnkr.co/edit/tulZ7L9RH69kMt6bDEgt?p=preview
Delete the action
attribute and submit the data using the $http
service: 删除
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>
When the form has an action
attribute, the browser does a full page reload from the server. 当表单具有
action
属性时,浏览器将从服务器重新加载整个页面。 This restarts the app and its controller, resulting in the clearing of the form. 这将重新启动应用程序及其控制器,从而清除表单。
For more information, see 有关更多信息,请参见
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.