CODEWITHSUNDEEP
javascriptangularjs
Ant
Ant

Reputation: 129

AngularJS function called itself in the form

in my form I have some input which is my custom directive and some text field. Additionally I have buttons: first one is for "Add new input to form" which binds to function $scope.AddNewItem() in my controller, second one is for "Remove input from form" which binded to function $scope.RemoveItem(index_of_item). Problem occurs when I type in my text field and press enter - input value is deleted because $scope.RemoveItem(index_of_item) is called itself. I'm sure I'm not call it because even Call Stack doesn't show the place where I could do it. Does anybody has the same problem?

<div class="form-group " ng-repeat="(i, user) in users">
    <div class="col-sm-5" style="padding-right: 0px; margin-top: 0px">
        <div typeahead ng-model="users[i]"> </div>
    </div>
    <div class="col-sm-2 ng-scope" style="padding-left: 5px; margin-top: 0px">
        <button ng-click="removeUserInput(i)" class="btn pull-right m-t-n-xs remove-input">
            <i>
                    <span class="glyphicon glyphicon-minus" style="color: white;"></span>
                </i>
        </button>
        <button ng-click="addUserInput()" class="btn pull-right m-t-n-xs add-input">
            <i>
                    <span class="glyphicon glyphicon-plus" style="color: white;"></span>
                </i>
        </button>
    </div>
</div>

And my controller code: 

   $scope.addUserInput = function () {
        $scope.users.push({});
    };

    $scope.removeUserInput = function (index) {
        if ($scope.users.length > 1) {
            $scope.users.splice(index, 1);
        }
        else if ($scope.users.length == 1) {
            $scope.users[0] = {};
        }
    };

Upvotes: 0

Views: 76

Answers (2)

Gangadhar Jannu
Gangadhar Jannu

Reputation: 4414

Just in case you are curious about why it has happened in that way,

  • Whenever you press enter inside form, the form submit action will be triggered along with the submit button onclick event.

  • A button without type attribute will behave like submit button.

In your code you didn't specify the type attribute for button so whenever you are pressing enter key

  • It will try to execute the onclick event of submit button.
  • Then it will try to execute form submit event

In your case since you didn't specify type attribute for button, buttons onclick event is executing that is reason your $scope.RemoveItem(index_of_item) function is executing itself even though you are not clicking the button.

DEMOs

without type attribute

Executes button onclick event along with form submit event 

<form onsubmit="javascript:alert('hi from form onsubmit')">
  <input type="text">
  <button onclick="javascript:alert('hi from button onclick')">click</button>
</form>

With type attribute (fixed)

<form onsubmit="alert('hi from onsubmit')">
<input type="text">
<button type="button" onclick="alert('hi from button onclick')">click me</button>

Upvotes: 1

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

Just update your code with the below one... The problem is you have missed type="button" for your buttons.

   <div class="form-group " ng-repeat="(i, user) in users">
       <div class="col-sm-5" style="padding-right: 0px; margin-top: 0px">
           <div typeahead ng-model="users[i]">
           </div>

           <div class="col-sm-2 ng-scope" style="padding-left: 5px; margin-top: 0px">
           <button type="button" ng-click="removeUserInput(i)" class="btn pull-right m-t-n-xs remove-input">
              <i>
              <span class="glyphicon glyphicon-minus" style="color: white;"></span>
              </i>
            </button>

           <button type="button" ng-click="addUserInput()" class="btn pull-right m-t-n-xs add-input">
              <i>
              <span class="glyphicon glyphicon-plus" style="color: white;"></span>
              </i>
           </button>
         </div>
       </div> 
    </div>

Upvotes: 1

Related Questions