MD Ghouse MD Ghouse - 1 month ago 23
AngularJS Question

How to reset Bootstrap Form

Here im using Bootstrap validations with AngularJs when my form is submitted the columns is reset but its shows all validation..But my aim is its should not display validations

Bootstrap

<div class="modal" id="modal1">
<div class="modal-dialog">
<div class="modal-content">
<form name="f1" novalidate ng-submit="Save(Auth.emp)">
<div class="modal-body">
<div class="form-horizontal">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
Email
</div>
<div class="col-sm-8">
<input type="text" name="email" class="form-control" ng-model="Auth.Email" ng-class="Submitted?'ng-dirty':''" required />
<span class="Error" ng-show="(f1.email.$dirty ||Submitted) && f1.email.$error.required">Email REq</span>
</div>
</div>
</div>

<div class="form-group">
<div class="row">
<div class="col-sm-4">
Password
</div>
<div class="col-sm-8">
<input type="text" name="psw" class="form-control" ng-model="Auth.Password" ng-class="Submitted?'ng-dirty':''" required />
<span class="Error" ng-show="(f1.psw.$dirty ||Submitted) && f1.psw.$error.required">Password REq</span>
</div>
</div>
</div>

</div>
</div>
<div class="modal-footer">
<input type="submit" value="{{LoginAction}}" />
</div>
</form>

</div>
</div>
</div>


AngularCode.Js

$scope.Save = function (emp) {
if ($scope.LoginAction = "Login") {
$scope.Submitted = true;
if ($scope.isFormValid == true) {
var ss = {
Email: $scope.Auth.Email,
Password: $scope.Auth.Password,
}
var xxer = myServices.GetLogin(ss);
xxer.then(function (msg) {
$scope.msg = msg.data;
$('#modal2').modal('show')
Reset();
})

}
}
}


Reset

function Reset() {
$scope.Email = '';
$scope.Password = '';

}

Answer
$scope.Save = function (emp) {
    if ($scope.LoginAction = "Login") {
        $scope.Submitted = true;
        if ($scope.isFormValid == true) {
            var ss = {
                Email: $scope.Email,
                Password: $scope.Password,
            }
            var xxer = myServices.GetLogin(ss);
            xxer.then(function (msg) {
                $scope.msg = msg.data;
                $('#modal2').modal('show')
              ClearForm();

            })

        }
    }
}

function ClearForm() {
    Reset();
  $scope.f1.$setPristine(); //here f1 our form name
    $scope.Submitted = false;
}