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

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