javascript – 为什么不调用AngularJS表单处理程序方法？

2019年7月27日 127次阅读

为什么下面显示的AngularJS表单不会在控制器中调用它的confForm()处理程序方法？我知道控制器连接到视图,因为视图打印在控制器中设置的confirmStatus和wleadid变量的值.但是,表单中的验证警告不会在用户的浏览器中打印,并且当用户单击提交按钮时没有任何操作.具体来说,下面的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和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;
        });
    }
};

});

最佳答案 问题是您正在验证您未提交的表单.在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>
点赞