AngularJS 错误处理：根据错误数组显示错误

Question

有一个包含错误消息列表的对象：错误代码 + 错误文本。有一组错误消息（错误代码数组）我想在页面上（在某些地方）显示而无需任何额外验证。

我已经尝试用 AngularJS 来做到这一点 here in jsFiddle，但由于我是 AngularJS 的新手，所以我可能在如何做得更好方面走错了路].这就是为什么我要求 SO 社区思考并提供帮助，如果这看起来是一个有趣的问题。

这是下面的代码或从 jsFiddle 查看。

除了angular.js，还添加了angular-messages.js：

HTML:

    <h3>So what I need here is actually to display errors that are returned by my custom showErrorsWeWant service. The array of errors can be different. No additional validation is needed. As result, I'm not sure if to stick with ng-message(s) or ng-if(s) (so both ng-message and ng-if are used in this example)</h3>
      <h4>
          As result, once the page is loaded, only 'You did not enter your name' and "'text for error04'" should be displyaed, based on 
          return ['error01', 'error04'];
      </h4>
      <h5>For three errors in returned array - then 3 respective errors displayed for these two inputs.
          The very <u>IMPORTANT</u> thing: I don't know how to stick so each error know its place - is it for first input or for the second one. Still thinking how to make it done. Probably the additional property should be assigned in the json object.</h5>

    <form name="myForm">
      <label>Name:</label>
      <input type="text" name="myName" ng-model="name" ng-minlength="5" ng-maxlength="5" required placeholder="type here" />
      <div ng-messages="myForm.myName.$error" style="color:red; padding-left: 60px;">
        <div ng-message="required">{{ errors['error01'] }}</div>
        <div ng-message="minlength">{{ errors['error02'] }}</div>
        <div ng-message="maxlength">{{ errors['error03'] }}</div>
      </div>
    </form>

    <div id="statusBlock">
        <label>City:</label>
        <input type="text" placeholder="and type here">
        <div style="color:red; padding-left: 60px;">
            <div ng-if="errorsArr[1]=='error04'">{{ errors['error04'] }}</div>
            <div ng-if="1<3">{{ errors['error05'] }}</div>
            <div ng-message="maxlength">{{ errors['error06'] }}</div>
        </div>
    </div>

  </div> 
</body>

JS代码：

var myApp = angular.module('myApp', ['ngMessages']);

myApp.controller('myController', ['$scope', 'showErrorsWeWant', function ($scope, showErrorsWeWant){

    $scope.name = "";

    $scope.errors= {
        error01: 'You did not enter your name',
        error02: 'Your name is less than 5 symbols',
        error03: 'Yr name is 6+ symbols',
        error04: 'text for error04',
        error05: 'text for error05',
        error06: 'text for error06'
    }
    $scope.errorsArr = showErrorsWeWant;
    console.log($scope.errorsArr);

}]);


myApp.service('showErrorsWeWant', [function (){
    return ['error01', 'error04'];
}]);

如果我遗漏了什么，请告诉我。谢谢。

Answer 1

您可以使用 ng-repeat 为每个元素创建一个 ng-message 的元素：

<div ng-messages="myForm.myName.$error" style="color:red; padding-left: 60px;">
  <div ng-message="{{key}}" ng-repeat="(key, errorMessage) in errors">{{ errorMessage }}</div>
</div>

为此，errors 对象的键必须匹配错误类型：

$scope.errors= {
  required: 'You did not enter your name',
  minlength: 'Your name is less than 5 symbols',
  maxlength: 'Yr name is 6+ symbols'
};

AngularJS 错误处理：根据错误数组显示错误

AngularJS error handling: show errors based on array of errors

html

javascript

arrays

error-handling

angularjs