使用ng-click angularjs进行表单验证

发布时间：2020-12-17 08:08:19 所属栏目：安全来源：网络整理

导读：我无法在现有答案中找到解决方案，因此我发布了这个解决方案。我有一个表单有很多输入字段，其中许多是必需的。在形式中有按钮(超过2个)，并且使用ng-click绑定到控制器中的功能。在执行功能之前，我需要在ng-click上验证表单。默认情况下，表单验证在函

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

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

在形式中有按钮(超过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点击只有在表单有效时才能触发：

<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，它允许您在代码中定义模型约束，并使用编程验证以及标准角度验证。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!