ng-click angularjs上的表单验证

Question

我无法在现有答案中找到解决方案，因此我将其发布。

我有一个包含许多输入字段的表单，其中很多都是必需的。

表单中有按钮（超过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>

Answer 1

一个非常非常简单的解决方案是为表单命名，以便您可以引用它，然后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表单验证。