我有 2 个 Controller :btnController 和 formController。我正在尝试从另一个 Controller 操作提交表单。问题是 Controller 中的函数只能在表单验证有效时调用。现在,如果用户尝试在不编写任何内容的情况下提交表单,则会调用提交函数。
我该如何修复它?
我的代码
<div ng-app='app'>
<div class='header' ng-controller='btnController'>
<button ng-click='submit()'>
Submit Form
</button>
</div>
<div class='container' ng-controller='formController'>
<h2>Form</h2>
<form id='myform'>
<input ng-model='name' placeholder='name' required/>
<span style="color:red" ng-show="myform.name.$dirty && myForm.name.$invalid">
<span ng-show="myform.name.$error.required">Username is required.</span>
</span>
</form>
</div>
</div>
(function(){
var app=angular.module('app',[]);
app.controller('btnController',function($scope){
$scope.submit=function(){
angular.element(document.getElementById('myform')).scope().submit();
}
});
app.controller('formController',function($scope){
scope.name;
$scope.submit=function(){
alert($scope.name);
}
});
})();
这里是示例 JsFiddle
最佳答案
编辑:
只有当表单有效时才会调用“formController”中的submit()函数:
app.controller('btnController',function($scope){
$scope.submit=function(){
var elementScope = angular.element(document.getElementById('myform')).scope();
if(elementScope.myform.name.$valid)
elementScope.submit();
}
});
新 Jsfiddle:https://jsfiddle.net/oucdodf8/
关于javascript - AngularJS中另一个 Controller 的表单验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36764775/