为什么不是't正在调用AngularJS表单处理程序方法
Why isn't AngularJS form handler method being called?
为什么下面显示的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和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>
相关文章:
- AngularJS:调用函数时编号不更新
- AngularJs.调用$http.success中的jQuery函数
- 无法从angularjs调用JavaScript原型函数
- 从控制器Angularjs调用链接函数
- angularjs调用事件中控制器的一个函数
- angularjs调用另一个控制器's函数
- angularjs调用一个函数
- 直接从Ionic选项卡angularjs调用函数
- 使用angularjs调用普通javascript
- 使用 AngularJS 调用 jQuery 插件函数
- $http angularjs 调用不是从带有 Worklight 的移动设备执行的
- 如何使用基本身份验证从 angularjs 调用 rest 服务
- 我只想要在 php 文件中通过 AngularJS 调用 Ajax 后的成功/失败消息.但是我也得到了带有标签的完整HT
- 从指令视图 AngularJS 调用控制器中的函数
- 从angularjs调用RESTful服务的正确方法
- 回调如何在 AngularJS 调用 REST 服务中工作
- AngularJS:调用嵌套控制器中的JSON数组值
- AngularJS调用空格键上的href(ui路由器)
- 从angularjs调用javascript时出错
- AngularJs调用$http内联方法