Clear form input field after submit in Angularjs with php..?

Question

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.

 $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>`

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. — Tanwir Alam, Apr 30 '18 at 06:22
Why are you setting `'Content-Type': 'application/x-www-form-urlencoded'` when you are posting JSON data? — georgeawg, Apr 30 '18 at 17:52
The `.success` method is [deprecated and removed from V1.6](https://stackoverflow.com/questions/35329384/why-are-angular-http-success-error-methods-deprecated-removed-from-v1-6/35331339#35331339). — georgeawg, Apr 30 '18 at 17:53

Shashank Vivek · Answer 1 · 2018-04-30T06:35:12.297

1

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

Inject $route in controller and do $route.reload() on ng-submit and the route is reloaded.
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.

edited Apr 30 '18 at 06:35

answered Apr 30 '18 at 06:29

Shashank Vivek

16,888
8
62
104

use $route.reload() in my js controller. – Tanwir Alam Apr 30 '18 at 06:33
@TanwirAlam :: Yes. when the form is submitted successfully – Shashank Vivek Apr 30 '18 at 06:33
How to use this $scope.formName.$setPristine().. – Tanwir Alam Apr 30 '18 at 06: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. – Tanwir Alam Apr 30 '18 at 07: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 ? – Shashank Vivek Apr 30 '18 at 07:39

USS · Accepted Answer · 2018-04-30T08:20:08.800

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

edited Apr 30 '18 at 08:20

answered Apr 30 '18 at 06:33

USS

460
4
16

i dont wan't to create a seperate reset options.i want after records insert form data automatically reset. – Tanwir Alam Apr 30 '18 at 06:45
@TanwirAlam You have to clear your form variable to see it's blank – USS Apr 30 '18 at 07:23
@TanwirAlam Please check UPDATE from the answer. – USS Apr 30 '18 at 08:20
You have modify my html view page.? – Tanwir Alam Apr 30 '18 at 08:38
@TanwirAlam Sorry, I'm not getting you – USS Apr 30 '18 at 09:10

score 1 · Answer 3 · answered Apr 30 '18 at 09:36

1

Its Work.With Minor Change.

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

answered Apr 30 '18 at 09:36

Tanwir Alam

87
3
14

score 0 · Answer 4 · edited May 18 '18 at 13:31

0

I think what you are looking for is:

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

edited May 18 '18 at 13:31

Tanwir Alam

87
3
14

answered Apr 30 '18 at 07:10

SuperVeetz

2,128
3
24
37

use this is js controller.when data is successfully inserted..? – Tanwir Alam Apr 30 '18 at 07:18
yes after form submits successfully – SuperVeetz Apr 30 '18 at 07:19
Sorry But not Work .I am still faced my prevoius problem. – Tanwir Alam Apr 30 '18 at 07: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 '18 at 07:25
include more code in the future, at least the HTML – SuperVeetz Apr 30 '18 at 07:26

Clear form input field after submit in Angularjs with php..?

4 Answers4