Question

如果触发验证错误，我会在页面顶部显示警报，当错误修复后，当前实现也会隐藏错误。这一切都有效但似乎效率低下，还有更好的方法吗？

HTML：

<div class="alert alert-danger"
  ng-repeat error in advAlerts
  ng-show="error.hasError()">
  {{error.text}}
</div>

JS：

$scope.advAlerts = [
  {
    hasError: checkFooError,
    text: 'Error Foo',
  },
  {
    hasError: checkBarError,
    text: 'Error Bar',
  },
  ...
]   

function checkFooError() {
  //check a list of required attributes to see they're all filled out
  //returns true/false
}

使用此方法，页面会响应：单击提交后，如果缺少任何必需的属性，则会显示警报。填写完所有必需属性后，警报会立即消失。

然而，由于摘要周期，checkFooError函数被称为ton（我认为？），有更好的方法吗？

- 编辑 -

标准验证事项已经到位，我忘了提及这些是＆＃34;高级警报＆＃34;因为他们是设计师想要的额外东西。

Answer 1

嗯，您不必为AngularJS中的表单验证编写很多代码。 AngularJS为我们提供了几个可用于检查表单状态的属性。因此，您可以在各个方面检查for及其控制器的状态。

表格状态： -

$valid：验证表单是否与html控件中定义的规则匹配

$invalid：根据定义的规则验证表单是否无效

$pristine：如果用户尚未使用HTML控件/标记，则为真

$dirty：如果用户已使用HTML控件/标记，则为真

示例用法： -

<div class="form-group" ng-class="{ 'has-error' : yourForm.username.$invalid && !yourForm.username.$pristine }">
    <label>Username</label>
    <input type="text" name="username" class="form-control" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>
    <p ng-show="yourForm.username.$error.required">Username is short.</p>
    <p ng-show="yourForm.username.$error.minlength">Username is short.</p>
    <p ng-show="yourForm.username.$error.maxlength">Username is long.</p>
</div>

<div class="form-group" ng-class="{ 'has-error' : yourForm.email.$invalid && !yourForm.email.$pristine }">
    <label>Email</label>
    <input type="email" name="email" class="form-control" ng-model="user.email">
    <p ng-show="yourForm.email.$invalid && !yourForm.email.$pristine" >Enter a valid email.</p>
</div>

参考：Angular documentation for forms

Answer 2

如果你想在你的html中避免使用样板代码突破代码，你可以避免将所有那些ng-show和类似的东西放在你的表单中，将它与验证机制本身完全分离。

在客户端执行验证时，您不需要必须绑定角度，您可以将angularjs与任何其他JS框架结合使用，并使它们作为独立模块与requiresJS一起工作。我一直在使用bootstrapValidator和angular一起使用，用requireJS绑定它们，它运行良好，在你的html中给你一个干净的代码，完全解耦的模块，你可以在你的视图加载时附加一个监听器使用$ viewContentLoaded，然后使用函数调用在表单上启用验证，我发布示例代码作为示例：

一个干净的angularJS表格：

  <form id="myForm" novalidate="novalidate" class="form-horizontal">            
        <label>name</label> 
        <input type="text" class="form-control" id="name" name="name" ng-model="rec.name" />

        <label>description</label>
        <textarea rows="5" id="description" ng-model="rec.description" name="description">         </textarea>


    // ... more fields

：

controllers.controller('MyCtrl', ['$scope', 'MyService',
  function($scope, MyService) {
    // ... controller code

    // setup validator based on your page form
    $scope.$on('$viewContentLoaded', loadFormValidator);        
  }]);

function loadFormValidator(){
    $('#myForm').bootstrapValidator({
        message: 'The form has invalid inputs',
        fields: {
            name: {
                message: 'The name is not valid',
                validators: {
                    notEmpty: {
                        message: 'The name is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 70,
                        message: 'The name must be more than 6 and less than 70 characters long'
                    },
                    regexp: {
                        regexp: /^[a-zA-Z0-9_\.\s]+$/,
                        message: 'The name can only consist of alphabetical, number, dot, spaces and underscore'
                    }
                }
            },

            description: {
                message: 'The description is not valid',
                validators: {
                    notEmpty: {
                        message: 'The description is required and can\'t be empty'
                    },
                    stringLength: {
                        min: 6,
                        max: 160,
                        message: 'The description must be more than 6 and less than 160 characters long'
                    }
                }
            },
            price: {
                message: 'The price is not valid',
                validators: {
                    notEmpty: {
                        message: 'The price is required and can\'t be empty'                
                    },                  
                    regexp: {
                        regexp: /^\d+(,\d{1,2})?$/,
                        message: 'The price can only consist of digits or , to indicate fraction values'
                    }
                }
            }
    });
};

function isFormValid(){

    // Get plugin instance
    var bootstrapValidator = $('#myForm').data('bootstrapValidator');

    bootstrapValidator.validate();

    // validate and then call method is Valid to check results
    return  bootstrapValidator.isValid();
};

您可以将上述代码封装在requireJS模块或JS命名空间中，甚至封装在角度服务中。在您的控制器中，您可以调用＆＃34; isFormValid＆＃34;检查所有输入是否适用于该特定表格：

/* callback for ng-click on your controller: */
$scope.saveRecord = function () {
  // validate fields
  if (isFormValid()) {
      MyService.save($scope.record);
      // ...
  }    
};

在Angular中显示表单验证错误的正确方法？

2 个答案: