为什么不是't正在调用AngularJS表单处理程序方法

Why isn't AngularJS form handler method being called?

本文关键字:AngularJS 调用 表单 处理 方法 程序 为什么不      更新时间:2023-09-26

为什么下面显示的AngularJS表单不在控制器中调用其confForm()处理程序方法我知道控制器已连接到视图,因为视图打印在控制器中设置的confirmStatuswleadid变量的值。但是,表单中的验证警告不会打印在用户的浏览器中,当用户单击提交按钮时也不会发生任何事情。具体来说,下面的confForm()处理程序方法中有两个SYSO命令从未打印到控制台,因此表明该方法未被激发为了运行confForm()表单处理程序方法,需要对下面的代码进行哪些特定的更改

这是视图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>

这里是JavaScript控制器,它能够将confirmStatus和webheaded变量填充到视图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;
        });
    }
};
});

问题是您正在验证未提交的表单。将HTML中的"phoneForm"实例更改为"confirmForm",您应该会得到预期的行为。

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>