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>`
5
  • not enough information to rectify your problem
    – Pradeep
    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. Apr 30, 2018 at 6:22
  • show your form and controller
    – Pradeep
    Apr 30, 2018 at 6:26
  • Why are you setting 'Content-Type': 'application/x-www-form-urlencoded' when you are posting JSON data?
    – georgeawg
    Apr 30, 2018 at 17:52
  • The .success method is deprecated and removed from V1.6.
    – georgeawg
    Apr 30, 2018 at 17:53

4 Answers 4

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 :)

5
  • i dont wan't to create a seperate reset options.i want after records insert form data automatically reset. Apr 30, 2018 at 6:45
  • @TanwirAlam You have to clear your form variable to see it's blank
    – USS
    Apr 30, 2018 at 7:23
  • @TanwirAlam Please check UPDATE from the answer.
    – USS
    Apr 30, 2018 at 8:20
  • You have modify my html view page.? Apr 30, 2018 at 8:38
  • @TanwirAlam Sorry, I'm not getting you
    – USS
    Apr 30, 2018 at 9:10
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.

5
  • use $route.reload() in my js controller. Apr 30, 2018 at 6:33
  • @TanwirAlam :: Yes. when the form is submitted successfully Apr 30, 2018 at 6:33
  • How to use this $scope.formName.$setPristine().. Apr 30, 2018 at 6:59
  • 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. Apr 30, 2018 at 7:01
  • @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 ? Apr 30, 2018 at 7:39
1

Its Work.With Minor Change.

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

I think what you are looking for is:

$scope.form = {}; // clears input fields
$scope.NameofFormSubmitted.$setPristine(); 
$scope.NameofFormSubmitted.$setUntouched(); // resets touch events
5
  • use this is js controller.when data is successfully inserted..? Apr 30, 2018 at 7:18
  • yes after form submits successfully
    – SuperVeetz
    Apr 30, 2018 at 7:19
  • Sorry But not Work .I am still faced my prevoius problem. Apr 30, 2018 at 7:21
  • 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.
    – SuperVeetz
    Apr 30, 2018 at 7:25
  • include more code in the future, at least the HTML
    – SuperVeetz
    Apr 30, 2018 at 7:26

Not the answer you're looking for? Browse other questions tagged or ask your own question.