我希望在提交后重置表单中的所有字段。除复选框外,所有字段均已正确重置;它们没有被检查,它们仍然被检查。
请检查我在AngularJS
中写的代码。如果用户点击“保存”按钮,则会调用 saveUser()。在这种方法中,我调用 reset()方法再次重新初始化表单。
但复选框未取消选中:
<form class="form-horizontal" ng-submit="registerUser.$valid && saveUser()" name="registerUser" ng-controller="createEmpController" formSubmitted novalidate>
<div class="box-body">
<div class="form-group">
<label class="col-sm-4 control-label" for="fullName">FullName</label>
<div class="col-sm-6">
<input type="text" placeholder="FullName" class="form-control" name="fullName" ng-model="fullName" ng-minlength="5" ng-maxlength="20" required>
<span>
<p ng-show="registerUser.fullName.$error.minlength" class="help-block" style="color:red">Full name is too short.</p>
<p ng-show="registerUser.fullName.$error.maxlength" class="help-block" style="color:red">Full name is too long.</p>
</span>
</div>
</div>
<div class="form-group has-feedback">
<label class="col-sm-4 control-label" for="inputEmail3">Email</label>
<div class="col-sm-6">
<input type="email" placeholder="Email" class="form-control" name="email" ng-model="email" ensure-unique="email" autocomplete="off" required>
<span>
<p ng-show="registerUser.email.$pending.unique" class="help-block" style="color:red;">Checking please wait...</p>
<p ng-show="registerUser.email.$error.unique" class="help-block" style="color:red;">This email already exist</p>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="inputPassword3">Password(Temporary)</label>
<div class="col-sm-6">
<input type="text" placeholder="Password" id="inputPassword3" class="form-control" ng-model="password" required name="password" ng-minlength="5" ng-maxlength="20">
<span>
<p ng-show="registerUser.password.$error.minlength" class="help-block" style="color:red">Password is too short.</p>
<p ng-show="registerUser.password.$error.maxlength" class="help-block" style="color:red">Password is too long.</p>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="EmployeeId">EmployeeID</label>
<div class="col-sm-6">
<input type="text" placeholder="Employee ID" id="EmployeeId" class="form-control" ng-model="empId" name="empId" required ng-minlength="5" ng-maxlength="20">
<span>
<p ng-show="registerUser.empId.$error.minlength" class="help-block" style="color:red">EmpId is too short.</p>
<p ng-show="registerUser.empId.$error.maxlength" class="help-block" style="color:red">EmpId is too long.</p>
</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-4 control-label" for="EmpRole">EmpRole</label>
<div class="col-sm-6">
<select class="form-control" ng-model="empRole" ng-options="values for values in empRolesList" required name="empRole">
<option value="">--select--</option>
<option value="DataEntry">DataEntry</option>
<option value="ExecutiveManager">ExecutiveManager</option>
<option value="Executive">Executive</option>
</select>
<p ng-show="registerUser.empRole.$dirty && registerUser.empRole.$error.required" class="help-block" style="color:red">EmpRole is required</p>
</div>
</div>
<div class=" form-group">
<label class="col-sm-4 control-label" >Skill set</label>
<div class="checkbox col-sm-6">
<label ng-repeat="technology in technologies" >
<input type="checkbox" ng-model="skill" ng-click="check($index,skill,technology)" ng-true-value="true"
ng-false-value="false">{{technology}}
</label>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<button class="btn btn-default" type="reset" id="resetSave" ng-click="reset">Cancel</button>
<button class="btn btn-info pull-right" type="submit" ng-disabled="registerUser.$invalid || skillSet==0" >Sign in</button>
</div><!-- /.box-footer -->
</form>
这是我的AngularJS
代码..
app.controller("createEmpController", ["$scope","$rootScope","$http",function($scope,$rootScope,$http){
console.log("Inside of Create Emp controller");
$scope.fullName="";
$scope.email="";
$scope.password="";
$scope.empId="";
$scope.empRole='';
$rootScope.empRolesList=[];
$scope.skillSet=[];
$scope.skill='';
$rootScope.technologies=[];
$http.get("/org/org-skills-roles").success(function(resp){
console.log(resp);
if(resp.status=="ok"){
$rootScope.empRolesList=resp.message.rolesList;
$rootScope.technologies=resp.message.technologies;
//$scope.skillSet=$scope.technologies;
}
});
$scope.saveUser=function(){
var user={'fullName':$scope.fullName,'email':$scope.email,'password':$scope.password,'empId':$scope.empId,'role':$scope.empRole,'skillSet':$scope.skillSet};
console.log("inside of registerUser ");
$http.post("/org/saveUser",user,{headers:{'Content-Type':'application/json'}}).success(function(resp){
// Message need to be displayed on save of new User.
// Reset the form.
$scope.reset();
});
};
$scope.reset=function(){
$scope.fullName="";
$scope.email="";
$scope.empId="";
$scope.empRole="";
$scope.password="";
$scope.skillSet=[];
$scope.skill=false;
$scope.registerUser.$setPristine();
}
$scope.check=function(index,skill,technology){
console.log("Index :"+index+" is checked"+skill);
if(skill)
$scope.skillSet.push($rootScope.technologies[index]);
else{
var index=$scope.skillSet.indexOf(technology);
$scope.skillSet.splice(index,1);
}
}
}]);