验证表单ng-click函数无效后加载页面

Question

我是angularjs的新手。 我正在验证触发保存功能的表格。

我将控件放置在表单中，并将其命名为myform 。

我在ng-required="true"名称和密码”文本框中使用ng-required="true" 。

在“ 保存”按钮的ng-click中，我调用save()函数

<div ng-app="myApp" ng-controller="myControl">
    <form name="myForm" novalidate>
    <table>
        <tr>
            <td>
                Name
            </td>
            <td>
                <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name"
                    ng-model="Name" ng-required="true">
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>
                <input type="password" class="form-control" id="txtPassword" placeholder="Password"
                    ng-required="true" name="Password" ng-model="Password">
            </td>
        </tr>
        <tr>
            <td>
                Email
            </td>
            <td>
                <input type="email" class="form-control" id="Email" placeholder="Email" name="Email"
                    ng-model="Email">
            </td>
        </tr>
        <tr>
            <td colspan="2" align="right">
                <button ng-click="save()"> Save </button>
            </td>
        </tr>
    </table>
    </form>
  </div>

在save()函数中，我验证该表单并发出警告，说明该表单有效还是无效。

<script type="text/javascript">
    var app = angular.module("myApp", []);
    app.controller("myControl", function ($scope, $http) {
        $scope.save = function () {
            if ($scope.myForm.$valid) {
                alert('Valid');
            } else {
                alert('Invalid');
            }
        };
    });
</script>

现在它将触发验证消息

输入名称和密码并提交表单后，页面已加载，但未触发警告消息。

Answer 1

我将假设它正在尝试调用表单的操作，这没什么，所以它将重新加载页面。 您可以使用ng-submit来阻止默认操作。

 var app = angular.module("myApp", []); app.controller("myControl", function($scope, $http) { $scope.save = function() { if ($scope.myForm.$valid) { alert('Valid'); } else { alert('Invalid'); } }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myControl"> <form name="myForm" novalidate ng-submit="save()"> <table> <tr> <td> Name </td> <td> <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password"> </td> </tr> <tr> <td> Email </td> <td> <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email"> </td> </tr> <tr> <td colspan="2" align="right"> <button type="submit"> Save </button> </td> </tr> </table> </form> </div> 

或者，如果您确实想保持ng-click ，则可以在save方法中传递事件并在该位置阻止它

 var app = angular.module("myApp", []); app.controller("myControl", function($scope, $http) { $scope.save = function(e) { e.preventDefault() if ($scope.myForm.$valid) { alert('Valid'); } else { alert('Invalid'); } }; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script> <div ng-app="myApp" ng-controller="myControl"> <form name="myForm" novalidate> <table> <tr> <td> Name </td> <td> <input type="text" class="form-control" id="txtName" name="Name" placeholder="Name" ng-model="Name" ng-required="true"> </td> </tr> <tr> <td> Password </td> <td> <input type="password" class="form-control" id="txtPassword" placeholder="Password" ng-required="true" name="Password" ng-model="Password"> </td> </tr> <tr> <td> Email </td> <td> <input type="email" class="form-control" id="Email" placeholder="Email" name="Email" ng-model="Email"> </td> </tr> <tr> <td colspan="2" align="right"> <button type="submit" ng-click="save($event)"> Save </button> </td> </tr> </table> </form> </div> 

Answer 2

这是你应该做的

<form ng-submit="myForm.$valid && save()" name="myForm">
    <button type="submit">Submit</button>
</form>

如果表单无效，此简单代码段ng-submit="myForm.$valid && save()"将不会调用save 。 这是有角度的方法-将所有验证与业务逻辑分开。 仅当所有表单数据均有效时，才应执行save方法。

基本输入验证指令很多： minlength, maxlength, required, pattern and etc. 。 AngularJS有一个很棒的机制，允许您创建自己的验证（ 这是一篇很棒的文章，介绍了如何为输入实现自定义验证，以防万一。）