AngularJS - Ng-Submit not executing function call

Question

I'm building a simple to do app in order to better understand some AngularJS fundamentals.

I have two views, home and new item.

In the new item view, I have a form, which uses a function on ng-submit call addNewToDoTask.

When the form is submitted it should execute this function, which will in turn update an object with the input values.

I will then use these values by means of a service, to show the new object on the home page.

But it appears nothing is being pushed into the taskArr array.

I've stepped through and debugged and the issue seems to be that the function in ng-submit is not being called at all when I click my submit button.

The button is of type submit it is also inside of the form, so I'm not sure what I'm doing wrong here.

New item html

<div ng-controller="newItemCtrl">
    <div class="row header">
        <div class="col-12">
            <h1>DOINGO</h1>
        </div>
    </div>
    <div class="row addNewItem">
        <form class="form" ng-submit="addNewToDoTask()">
            <div class="row projectInput text-center">
                <div class="col-12">
                    <input type="text" ng-model="projectInput" placeholder="Enter a project title">
                </div>
            </div>
            <div class="row taskInput text-center">
                <div class="col-12">
                    <input type="text" ng-model="taskInput" placeholder="Enter your task details">
                </div>
            </div>

    </div>
    <div class="buttonRow row">
        <div class="col-12 text-center">
            <button type="submit" class="btn-lg btn-success addItemButton">Add</button>
            </form>
            <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a>
            <a href="#/"><button class="btn-lg btn-info addItemButton">Open Tasks</button></a>
        </div>
    </div>
</div>

app.module.js

var app = angular.module('ToDoListApp', ['ngRoute']);


app.config(function ($routeProvider, $locationProvider) {

    $locationProvider.hashPrefix('');

    $routeProvider

        .when("/", {
            templateUrl: "app/home/homePage.html",
        })
        .when("/newItem", {
            templateUrl: "app/newItem/newitem.html",
        })
        .otherwise({
            redirectTo: '/'
        });
});

//controller for home page

app.controller('homePageCtrl', function ($scope, newToDoTaskService) {


    $scope.toDoList = newToDoTaskService.getTasks();

});

//controller for new item page
app.controller('newItemCtrl', function ($scope, newToDoTaskService) {

    $scope.addNewToDoTask = function () {
        newToDoTaskService.addTask({
            project: $scope.projectInput,
            task: $scope.taskInput,
            done: false
        });
        $scope.projectInput = "";
        $scope.taskInput = "";
    };

});

//service to persist data across views
app.service('newToDoTaskService', function () {
    var taskArr = [];
    this.getTasks = function () {
        return taskArr;
    };
    this.addTask = function (task) {
        taskArr.push(task);
    };
});

Answer 1

The ng-submit function is not executing because the submit button is not part of the form:

ERRONEOUS

<div ng-controller="newItemCtrl"> <div class="row header"> <div class="col-12"> <h1>DOINGO</h1> </div> </div> <div class="row addNewItem"> <form class="form" ng-submit="addNewToDoTask()"> <div class="row projectInput text-center"> <div class="col-12"> <input type="text" ng-model="projectInput" placeholder="Enter a project title"> </div> </div> <div class="row taskInput text-center"> <div class="col-12"> <input type="text" ng-model="taskInput" placeholder="Enter your task details"> </div> </div> <!-- FORM tag closes early here --> </div> <div class="buttonRow row"> <div class="col-12 text-center"> <button type="submit" class="btn-lg btn-success addItemButton">Add</button> <!-- FORM CLOSING tag ignored --> </form> <a href="#/"><button class="btn-lg btn-danger cancelButton">Cancel</button></a> <a href="#/"><button class="btn-lg btn-info addItemButton">Open Tasks</button></a> </div> </div> </div>

The </div> closing tag closes the <form> element early. The HTML5 parser ignores the subsequent </form> closing tag.

The submit event event listener on the <form> element does not get the event because the submit button dispatches its submit event from outside the form.