サーバーの応答メッセージ

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

2つのオプションがあります。 はどちらかあなたは、各フィールドのエラー・メッセージを入れて、それが

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

を発生したときにそれを表示したり、代わりにあなたはトーストポップアップエラーMSGのを使用することができます：

$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"); 
    } 

...など