CODEWITHSUNDEEP
angularjs
buggy1985
buggy1985

Reputation: 959

ng-submit not working correctly with enter key

I'm new to AngularJS and now facing the following problem.

Inserting new items works well by clicking the submit button, but doesn't work when I hit the Enter button. With enter the $scope.newQueryInput is undefined.

Also with the first enter, I get a new item inserted (with an empty string). With the second hit nothing is happening, which should be the expected behaviour for the first hit too.

<!--HTML part-->
<ul ng-controller="QueryCtrl">
    <li ng-repeat="query in queries">
        <i class="fa fa-trash onhover alignleft" title="delete query" ng-click="removeQuery($index)"></i>
        <a href="#">{{query.keyword}}</a>
    </li>
    <li class="addnew">
        <form ng-submit="addQuery()" action="">
            <input type="text" ng-model="newQueryInput" placeholder="Add new query"/>
            <input type="submit" />
        </form>
    </li>
</ul>


// script.js
var App = angular.module('App', []);
function QueryCtrl($scope) {
    $scope.queries = queries;
    $scope.addQuery = function() {
        console.log($scope.newQueryInput);
        console.log($scope);

        if (typeof $scope.newQueryInput != "undefined") {
            newQuery = { "keyword" : $scope.newQueryInput }
            $scope.queries.push(newQuery);
            $scope.newQueryInput = "";
        }
    };
    $scope.removeQuery = function(index) {
        $scope.queries.splice(index, 1);
    }
};

Upvotes: 1

Views: 2035

Answers (1)

Kostya Shkryob
Kostya Shkryob

Reputation: 2369

I have done 3 fixes to your form:

  1. Changed $scope.queries = queries; to $scope.queries = []; because queries is undefined

  2. Added $event.preventDefault(); to submit handler so form will not be submitted.

  3. Added check for empty string $scope.newQueryInput !== ""

And now it works with Enter key or button click.

<!doctype html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    </head>
    <body ng-app="plunker">
        <ul ng-controller="QueryCtrl">
            <li ng-repeat="query in queries">
                <i class="fa fa-trash onhover alignleft" title="delete query" ng-click="removeQuery($index)"></i>
                <a href="#">{{query.keyword}}</a>
            </li>
            <li class="addnew">
                <form ng-submit="addQuery($event)" action="">
                    <input type="text" ng-model="newQueryInput" placeholder="Add new query"/>
                    <input type="submit" />
                </form>
            </li>
        </ul>
    </body>
    <script>
    var app = angular.module('plunker', []).controller('QueryCtrl', ['$scope', function($scope) {
        $scope.queries = [];
        
        $scope.addQuery = function($event) {
            $event.preventDefault();

            if (typeof $scope.newQueryInput != "undefined"
                && $scope.newQueryInput !== "") {
                newQuery = { "keyword" : $scope.newQueryInput }
                $scope.queries.push(newQuery);
                $scope.newQueryInput = "";
            }
        };
        
        $scope.removeQuery = function(index) {
            $scope.queries.splice(index, 1);
        }
    }]);
    </script>
</html>

Upvotes: 1

Related Questions