我无法在现有答案中找到解决方案,因此我将其发布。
我有一个包含许多输入字段的表单,其中很多都是必需的。
表单中有按钮(超过2个),并使用ng-click绑定到控制器中的功能。
在执行功能之前,我需要先在ng-click上验证表单。
默认情况下,表单验证是在函数执行后进行的。如果未填写必填字段,则功能不应运行。
我制造了一个小提琴。https://jsfiddle.net/z1uyyqg9/
<script> var app = angular.module('myApp', []); app.controller('myCtrl', function($scope) { $scope.name=undefined; $scope.preview = function(){ alert("Previewed"); }; $scope.update = function(){ alert("Updated"); } }); </script> <div ng-app="myApp" ng-controller="myCtrl"> <form> <input type="text" ng-model='name' required> <button ng-click='preview()'>Preview</button> <button ng-click='update()'>Update</button> </form> </div>
一个非常非常简单的解决方案是为表单命名,以便您可以引用它,然后ng-click仅在表单有效时才调整来触发:
ng-click
<form name="myform"> <input type="text" ng-model='name' ng-required="true" /> <button ng-click="myform.$valid && preview()">Preview</button> <button ng-click="myform.$valid && update()">Update</button> </form>
分叉的小提琴:https ://jsfiddle.net/r8d1uq0L/
我喜欢将验证(与业务有关)从视图中分离出来,为此,我创建了egkyron,使您可以在代码中定义模型约束,并使用程序验证和标准Angular表单验证。