Why is the AngularJS form handler method not called?

Question

Why doesn't the AngularJS form shown below invoke the handler method confForm()in the controller? I know that the controller is connected to the view because the view prints the values confirmStatusand wleadidgiven in the controller. However, validation warnings in the form are not printed in the user browser, and nothing happens when the user clicks the submit button. In particular, there are two SYSO commands in the handler method confForm()below, which are never printed on the console, thereby indicating that the method does not start. What specific changes need to be made to the code below to run the form handler method confForm()?

Here is the html view:

confirmStatus: {{ confirmStatus }}
<br>
webleadid: {{ wleadid }}
<div ng-show="confirmStatus=='success'">
<h1>Some title</h1>
<h2>Some message.</h2>
<form name="confirmForm" ng-submit="confForm(phoneForm.$valid)" novalidate>
    Cell Phone number: 
    <input type="hidden" name="someData" ng-value="wleadid" />
    <input type="text" name="phonenum1" ng-model="resultphone.phonenum1" required />
    <input type="text" name="phonenum2" ng-model="resultphone.phonenum2" required />
    <input type="text" name="phonenum3" ng-model="resultphone.phonenum3" required />
    <p ng-show="phoneForm.phonenum1.$error.required && !phoneForm.phonenum1.$pristine" class="help-block">All 3 parts of cell phone number are required.</p>
    <p ng-show="phoneForm.phonenum2.$error.required && !phoneForm.phonenum2.$pristine" class="help-block">All 3 parts of cell phone number are required.</p>
    <p ng-show="phoneForm.phonenum3.$error.required && !phoneForm.phonenum3.$pristine" class="help-block">All 3 parts of cell phone number are required.</p>
    <button type="submit" ng-disabled="phoneForm.$invalid" >Submit</button>
</form>
</div>

JavaScript, confirmStatus webleadid html, :

angular.module('confirm', []).controller('confirm', function($scope, $http, $routeParams) {

 // set the default value of our number
$scope.confirmStatus = "success";
$scope.wleadid = "30";

$scope.confForm = function(isValid) {
    console.log("inside confForm")
    if (isValid) {
        console.log("confForm is Valid!")
        var funcJSON = {type:"resultphone", wleadid: $scope.wleadid, phonenum1: $scope.phonenum1, phonenum2: $scope.phonenum2, phonenum3: $scope.phonenum3, };
        console.log('form is valid.  about to post... ')
        $http.post('/submit-phone', funcJSON).then(function(response) {
            $scope.confirmStatus = response.data.content;
        });
    }
};

});

Answer 1

, , . "phoneForm" "confirmForm" HTML-, , .

confirmStatus: {{ confirmStatus }}
<br>
webleadid: {{ wleadid }}
<div ng-show="confirmStatus=='success'">
<h1>Some title</h1>
<h2>Some message.</h2>
<form name="confirmForm" ng-submit="confForm(confirmForm.$valid)" novalidate>
    Cell Phone number: 
    <input type="hidden" name="someData" ng-value="wleadid" />
    <input type="text" name="phonenum1" ng-model="resultphone.phonenum1" required />
    <input type="text" name="phonenum2" ng-model="resultphone.phonenum2" required />
    <input type="text" name="phonenum3" ng-model="resultphone.phonenum3" required />
    <p ng-show="confirmForm.phonenum1.$error.required && !confirmForm.phonenum1.$pristine" class="help-block">All 3 parts of cell phone number are required.</p>
    <p ng-show="confirmForm.phonenum2.$error.required && !confirmForm.phonenum2.$pristine" class="help-block">All 3 parts of cell phone number are required.</p>
    <p ng-show="confirmForm.phonenum3.$error.required && !confirmForm.phonenum3.$pristine" class="help-block">All 3 parts of cell phone number are required.</p>
    <button type="submit" ng-disabled="confirmForm.$invalid" >Submit</button>
</form>
</div>