我正在尝试使用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
答案 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"
答案 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
属性时,浏览器将从服务器重新加载整个页面。这将重新启动应用程序及其控制器,从而清除表单。
有关更多信息,请参见