Clear input field on button click in Angular

Question

I know this is a common question , but I am facing problem in this. I am unable to refresh by input fields on button click.

When I am clicking button , the information is sent and added up in a list. So whenever I click it the input fields must get cleared/refresh (not page load).

View:

<div class="input-group">
        <span class="input-group-addon" id="reg_input">Name</span>
         <input type="text" class="form-control" placeholder="Name" ng-model="ff.Name" required>
</div>

<div class="input-group">   
    <span class="input-group-addon" id="reg_input">Block</span>
     <input class="form-control" id="bl" type="text" ng-model="ff.Block" required>
</div>

<div class="input-group">   
    <input type="text" class="form-control" id="ip" type="text" ng-model="ff.IP" ng-maxlength="2" style="width: 30px" required>
</div>
   <a class="btn btn-md btn-primary" ng-click="getClick(ff)">Add</a>

Is there any refresh predefined in bootstrap button ?

EDIT controller:-

$scope.list = {};
                $scope.array_of_Names = [];
              $scope.getClick= function() {
                 $scope.master = angular.copy($scope.ff);
                  $http.post("url", $scope.list).success(function(data) { 
                        $scope.AllData= data;
                        $scope.addInfo.Segments.push($scope.list);
                        $scope.ff.Name = "";
                        $scope.ff.Block= "";
                        $scope.ff.IP= "";
                        $scope.array_of_Names.push($scope.list);
                       console.log("Segment successfully created");

                  },function (data, status, headers, config) { 
                       // growl.error("Something went wrong");
                  });
                     console.log($scope.master);
                };

Just initialize your forms ng-model value to its default values on click event. — Manish Balodia
– Manish Balodia, Commented Apr 24, 2018 at 7:13

sebu · Accepted Answer · 2018-04-24 08:18:36Z

2

Just Try it!. All property under $scope.ff will be reset.

$scope.ff={};

And you can apply it in your code part like this:

$scope.list = {};
            $scope.array_of_Names = [];
          $scope.getClick= function() {
             $scope.master = angular.copy($scope.ff);
              $http.post("url", $scope.list).success(function(data) { 
                    $scope.ff={};
                    $scope.AllData= data;
                    $scope.addInfo.Segments.push($scope.list);
                    $scope.array_of_Names.push($scope.list);
                   console.log("Segment successfully created");

              },function (data, status, headers, config) { 
                   // growl.error("Something went wrong");
              });
                 console.log($scope.master);
            };

edited Apr 24, 2018 at 8:18

answered Apr 24, 2018 at 7:18

sebu

2,9641 gold badge33 silver badges47 bronze badges

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

6 Comments

WhoAmI Over a year ago

Ok where I need to put that?

WhoAmI Over a year ago

Nope, no changes brother.

sebu Over a year ago

@WhoAmI i don't know the full business, but please try to place $scope.ff={}; after success. edited my answer.

sebu Over a year ago

could you upload your code to plnkr, i'll try your code later.

WhoAmI Over a year ago

Thanks , it is working. $scope.ff={}; should be after push , as it was sending null earlier.

|

Sider Topalov · Accepted Answer · 2018-04-24 07:37:53Z

1

EDIT:

$scope.getClick= function() {
    $scope.master = angular.copy($scope.ff);
    $scope.ff = {};
    $http.post("url", $scope.list).success(function(data) { 
           $scope.AllData= data;
           $scope.addInfo.Segments.push($scope.list);
           $scope.array_of_Names.push($scope.list);
           console.log("Segment successfully created");
        },function (data, status, headers, config) { 
          // growl.error("Something went wrong");
        }).error(function(err) {
            console.log("Error: ", err);
        });
        console.log($scope.master);
 };

edited Apr 24, 2018 at 7:37

answered Apr 24, 2018 at 7:17

Sider Topalov

1817 bronze badges

9 Comments

WhoAmI Over a year ago

I did that , I have updated the edit but didn't get refreshed.

Sider Topalov Over a year ago

Are you sure your request enter in successs or error function please make sure in what case enter your request with console.log

Sider Topalov Over a year ago

Please try this after your console.log($scope.master); write this $scope.ff = {};

WhoAmI Over a year ago

You mean to say $scope.list ? yes its successful . But the return data is not these which I am passing . I need to clear input fields before POST happens.

Sider Topalov Over a year ago

Is there any error you get or somethink like that? If no then please console.log($scope.ff) after $scope.ff = {};

|

John Velasquez · Accepted Answer · 2018-04-24 07:27:46Z

0

Try then instead of success

$scope.getClick = function(ff){
  $scope.master = angular.copy($scope.ff);
              $http.post("url", $scope.list).then(function(data) { 
                    $scope.AllData= data;
                    $scope.addInfo.Segments.push($scope.list);
                    $scope.ff.Name = "";
                    $scope.ff.Block= "";
                    $scope.ff.IP= "";
                    $scope.array_of_Names.push($scope.list);
                   console.log("Segment successfully created");

              },function (data, status, headers, config) { 
                   // growl.error("Something went wrong");
              });
                 console.log($scope.master);
}

edited Apr 24, 2018 at 7:27

answered Apr 24, 2018 at 7:15

John Velasquez

3,4512 gold badges21 silver badges25 bronze badges

2 Comments

WhoAmI Over a year ago

Tried this but nothing happened. Please check my controller . Accordingly I need to do

WhoAmI Over a year ago

Doesn't matter , it's same . Ok I explain Name Block and IP is user input not response. I need to clear this value before POST happens

Collectives™ on Stack Overflow

Clear input field on button click in Angular

3 Answers 3

6 Comments

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related