javascript - 服务器响应消息

Question

我需要获取服务器响应错误消息以在提交后显示在表单中。如果我在 js 中使用此代码，我会收到消息

 .error(function (data, status, header, config) {
    $scope.postDataSuccessfully = false;
    var messages = [];
    angular.forEach(data.errors, function (value, key) {
        $scope.ResponseDetails = "Data: " + data +
                "<hr />status: " + status +
                "<hr />headers: " + header +
                "<hr />config: " + config;
        messages.push('Error! ' + key + ' is not correct');

    });
    $scope.messages = messages;
});

在html中

 <div ng-repeat="message in messages track by $index">
    <div data-ng-hide="message == ''" data-ng-class="(postDataSuccessfully) ? 'alert alert-success' : 'alert alert-danger'">
        {{message}}
    </div>
 </div>

但这只在提交后显示在一个地方，就像这张图片

我想在有错误的字段上显示消息，比如下一张图片

这是我用于此表单输入的 html 代码

<div class="form-group">
  <label for="type" class="col-sm-3 control-label">{{'TYPE'| translate}}</label>
  <div class="col-sm-9">
    <select class="form-control" id="type" name="type" ng-model="type">
      <option ng-repeat="type in types" value="{{type}}">{{type}}</option>
    </select>


  </div>

</div>
<div class="form-group">
  <label for="description" class="col-sm-3 control-label">{{'DESCRIPTION'| translate}}</label>
  <div class="col-sm-9">
    <textarea type="text" rows="3" class="form-control" id="description" name="description" ng-model="description" placeholder="description"></textarea>
    <br>
  </div>
</div>

Answer 1

你有两个选择:要么你为每个字段放置一条错误消息并在它发生时显示它

<div ng-messages="myForm.myselect.$error"  ng-if="myForm.$submitted || myForm.myselect.$touched">
 <div ng-message="required">myselect is required.</div>
</div>

或者您可以使用 toast 弹出错误消息:

$scope.validateMyData = function() {
      var errorType = callYourServerService();

    if(errorType === "myFirstField") {
      toaster.pop('error', "Error", "Please insert valid value for myFirstField");
    }
     if(errorType === "mySecondField") {
      toaster.pop('error', "Error", "Please insert valid value for mySecondField");
    }

...等等