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表单验证一起使用。

Answer 2

您可以设置一个标志，以便在表单无效时显示某种所需的消息或设置一些css类。

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.name=undefined;
    $scope.showMsgs = false;
    $scope.preview = function(form){
        if ($scope[form].$valid) {
            alert("Previewed");
        } else {
            $scope.showMsgs = true;
        }
    };
    $scope.update = function(form){
        if ($scope[form].$valid) {
            alert("Updated");
        } else {
            $scope.showMsgs = true;
        }    
    };
});

.error {
  border-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myform" novalidate ng-init="disabled=false">
        <p ng-show="showMsgs && myform.name.$error.required">This field is required</p>
        <input type="text" name="name" ng-model='name' ng-required="!disabled" ng-disabled="disabled" ng-class="{error: showMsgs && myform.name.$error.required}" />
        
        <button ng-click="preview('myform')">Preview</button>
        <button ng-click="update('myform')">Update</button>
        <button ng-click="disabled=!disabled">toggle disabled</button>
    </form>
</div>