0

When i am click add button for add records in next time then last form data is present in form it is not clear in bootstrap form model.

enter image description here

 $scope.saveAdd = function () {
    $http({
        method: 'post',
        url: 'user/insert',
        data: $scope.form,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function (data)
    {
        if (data == 1) {

            $scope.user_succ = $scope.user_succ ? false : true;
            $scope.succ = "User added successfully";
            $timeout(function () {
                $(".modal").modal("hide");
            }, 3000);
        } else if(data == 3) {
             $scope.confirm_password=$scope.confirm_password ? false :true;
             $scope.confirm_password_error="Confirm Password is Not Matched";

        }else{
            $scope.user_err = $scope.user_err ? false : true;
            $scope.err = "User insertion failed! Try again.";
        }
    });
};

My View page:- This is my view page that is load from angularjs routes.js.If you found any error error please give me some feedback.or any others angularjs validation you have please share with me.

<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
   <div class="modal-body">
      <div class="form-group">
           <label for="name" class="col-form-label">Name<span class="text-danger">*</span></label>
     <input type="text" class="form-control" ng-model="form.name" id="name" name="name" placeholder="Enter Name" required>
      <span style="color:red" ng-show="addItem.name.$touched && addItem.name.$invalid">Please Enter User Name.</span>
         </div>
     <div class="form-group">
         <label for="phone" class="col-form-label">Phone Number<span class="text-danger">*</span></label>
      <input type="text" class="form-control" ng-model="form.phone" id="phone" name="phone" placeholder="Enter Phone Number" required="">
     <span style="color:red" ng-show="addItem.phone.$touched && addItem.phone.$invalid">Please Enter Phone Number.</span>
                                                </div>
     <div class="form-group">
     <label for="usertype" class="col-form-label">User Type<span class="text-danger">*</span></label>
        <select class="form-control" ng-model="form.type" id="type" name="type" required="">
        <option value="">Select a user type</option>
              <option value="branch">Branch Admin</option>
              <option value="manager">Branch Manager</option>
      </select>
    <span style="color:red" ng-show="addItem.type.$touched && addItem.type.$invalid">Select User Type.</span>
         </div>
     <div class="form-group">
      <label for="address" class="col-form-label">Address</label>
         <textarea class="form-control" ng-model="form.address" id="address" name="address" placeholder="Enter Address" required=""></textarea>
     <span style="color:red" ng-show="addItem.address.$touched && addItem.address.$invalid">Please Enter Address.</span>
     </div>
      <div class="form-group">
        <label for="username" class="col-form-label">Username<span class="text-danger">*</span></label>
       <input type="text" class="form-control" ng-model="form.username" id="username" name="username" placeholder="Enter Username" required="">
       <span style="color:red" ng-show="addItem.username.$touched && addItem.username.$invalid">Please Enter Username.</span>
      </div>
      <div class="form-group">
        <label for="password" class="col-form-label">Password<span class="text-danger">*</span></label>
       <input type="password" class="form-control"  ng-model="form.password" placeholder="Password" name="password" required="required" ng-minlength="6"/>
      <div ng-if="addItem.password.$touched || signupSubmitted">
        <p style="color:red" ng-show="addItem.password.$error.required" class="help-block">Password is required</p>
      <p style="color:red" ng-show="addItem.password.$error.minlength" class="help-block">Minimum 6 character</p>
             </div>
      </div>

     <div class="form-group">
         <label for="recipient-name" class="col-form-label">Confirm Password<span class="text-danger">*</span></label>
       <input type="password" class="form-control"  name="confirm_password"  ng-model="form.confirm_password" placeholder="Confirm password" match-password="password" required>

      <div ng-if="addItem.confirm_password.$touched || signupSubmitted">
        <p style="color:red" ng-show="addItem.confirm_password.$error.required" class="help-block">Confirm password is required</p>
     <p style="color:red" ng-show="confirm_password" >{{confirm_password_error}}</p>

            </div>
       </div>

     </div>
     <div class="modal-footer">

        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

        <button type="submit" class="btn btn-primary" >Submit</button>

    </div>
</form>`
Improve this question
5
  • not enough information to rectify your problem Commented Apr 30, 2018 at 6:16
  • When i am Add Records first time then data is inserted .But I am insert second time then prevoius data is show in my form. Commented Apr 30, 2018 at 6:22
  • show your form and controller Commented Apr 30, 2018 at 6:26
  • Why are you setting 'Content-Type': 'application/x-www-form-urlencoded' when you are posting JSON data? Commented Apr 30, 2018 at 17:52
  • The .success method is deprecated and removed from V1.6. Commented Apr 30, 2018 at 17:53

4 Answers 4

Reset to default
1

You can try reset function which reset your form fields. But this is not the accurate solution. Please provide your Complete controller and HTML code to make an accurate solution.

$scope.resetForm = function(){
   /* reset the data to a new object so that all the properties
    * of form are reset
    */
    $scope.data = {};
  };

UPDATE
Based on the partial HTML code, you can try form controller API setPristine: $scope.FORMNAME.$setPristine();

Replace FORMNAME with your form name. Also make note that as your form is binding a model object to your inputs so, you need to take care of clearing those input model as well:

$scope.formData = {};

Hope this will help to solve your point :)

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

i dont wan't to create a seperate reset options.i want after records insert form data automatically reset.
@TanwirAlam You have to clear your form variable to see it's blank
@TanwirAlam Please check UPDATE from the answer.
You have modify my html view page.?
@TanwirAlam Sorry, I'm not getting you
1

The reason is that your previous value that you bind with model is still there. So, you can do either of 2 things:

  1. Inject $route in controller and do $route.reload() on ng-submit and the route is reloaded.
  2. Reinitialize the model by creating and calling a function which clears the data.Use $scope.formName.$setPristine() if you have validation depending on this pristine state of form

NOTE: $route.reload() will reload your route, so all the changes which have in your controller will be reverted. So choose accordingly.

Improve this answer

5 Comments

use $route.reload() in my js controller.
@TanwirAlam :: Yes. when the form is submitted successfully
How to use this $scope.formName.$setPristine()..
After use this $route.reload() its create a problem because i have validation in form.My field is clear but its show my validation error.
@TanwirAlam: in your question, update your form.html which is showing error. It shouldn't happen as the entire form will be reloaded. whats the validation you have applied ?
1

Its Work.With Minor Change.

$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine(); 
$scope.NameofFormSubmitted.$setUntouched();
Improve this answer

Comments

0

I think what you are looking for is: 

$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine(); 
$scope.NameofFormSubmitted.$setUntouched(); // resets touch events
Improve this answer

5 Comments

use this is js controller.when data is successfully inserted..?
yes after form submits successfully
Sorry But not Work .I am still faced my prevoius problem.
I think there was some confusion, please see my edit... you need to have an ID and name attributes on your form and the $scope.IDofFormSubmitted.$setPristine() is a function call made to your form element, not the data itself.
include more code in the future, at least the HTML

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.