Ad

Why Isn't AngularJS Form Handler Method Being Called?

- 1 answer

Why doesn't the AngularJS form shown below call its confForm() handler method in the controller? I know that the controller is hooked up to the view, because the view prints the values of the confirmStatus and wleadid variables that are set in the controller. However, the validation warnings in the form are not printed in the user's browser, and nothing happens when the user clicks on the submit button. Specifically, there are two SYSO commands in the confForm() handler method below that never get printed to the console, thus showing that the method is not fired. What specific changes need to be made to the code below in order to get the confForm() form handler method to run?

Here is the view 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(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>

And here is the JavaScript controller, which is able to populate the confirmStatus and webleadid variables to the view html, but which is not processing the form submit button clicks:

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;
        });
    }
};

});
Ad

Answer

The problem is that you are validating a form you aren't submitting. Change the instances of 'phoneForm' to 'confirmForm' in your HTML and you should get the behaviour your expecting.

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>
Ad
source: stackoverflow.com
Ad