如何使用ngMessages模塊清除服務器端的angularjs消息

我試圖使用angularjs實現表單元素的服務器端驗證。如何使用ngMessages模塊清除服務器端的angularjs消息

我跟着這個問題（使用該問題的最後一個答案作爲解決方案的基礎）。

How to display server errors in Angularjs with ng-messages

，並與本文提供的幫助：http://codetunes.com/2013/server-form-validation-with-angular/ - 我想要的值更改後清除使用指令錯誤消息。

問題是，我不知道如何獲得該字段的句柄來重置輸入的有效性。下面的代碼基本上是從文章中複製的，但不適用於ng-messages模塊。

angular.module('OCS') 
    .directive('serverError', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs, ctrl) { 
     element.on('change', function (ev) { 
     scope.$apply(function() { 
      scope.$setValidity('server', true); 
     }) 
     }); 
    } 
    } 
});

下面的代碼從服務器讀取響應並顯示錯誤消息。（這工作）

if (response.status === 400) { 
    response.data.forEach(function(fieldMsg){ 
     form[fieldMsg.param].$setValidity('server', false); 
     if (!$scope.formErrors){ 
     $scope.formErrors = {}; 
     } 
     $translate('errors.' + fieldMsg.msg).then(function(msg){ 
     $scope.formErrors[fieldMsg.param] = msg; 
     }); 
    });

和輸入的例子：

<div layout-gt-sm="row"> 
    <md-input-container flex-gt-sm="50"> 
     <label>{{'pages.profilePage.email' | translate}}</label> 
     <input type="email" ng-model="profileDetails.email" name="email" class="md-input md-input-white" required server-error> 
     <div ng-messages="updateProfileForm.email.$error" ng-if='updateProfileForm.email.$dirty'> 
      <div ng-messages-include="error-messages"></div> 
      <div ng-message="server">{{formErrors.email}}</div> 
     </div> 
    </md-input-container> 
</div>

顯示服務器錯誤工作正常。
指令已註冊並觸發。

從本質上講，我需要從該指令內執行更多的東西是這樣的：

form[element[0].name].$setValidity('server', true);

但我怎麼可以從指令中得到了current form參考不知道表單名？

----------------編輯在這裏--------------

這是我一起去的，我是不知道是否有更好的方法，從指令訪問形式：

angular.module('OCS') 
    .directive('serverError', function() { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs, ctrl) { 
     element.on('change', function (ev) { 
     scope.$apply(function() { 
      if (scope.formErrors) { 
      scope.formErrors[element[0].name] = undefined; 

      var formName = element.parents('form').attr('name'); 
      scope[formName][element[0].name].$setValidity('server', true); 
      } 
     }) 
     }); 
    } 
    } 
});

來源

2016-05-16 Richard G

您正在使用'$ scope.formErrors'來存儲錯誤，所以您只需要從中刪除該字段。即'刪除$ scope.formErrors ['email'];' – Gavin

謝謝，我已經試過了，但它只是刪除了消息，字段和表單仍被視爲無效。 –

你可以簡單地傳遞表單名稱到您提交處理程序：

<form name="form1" ng-submit="handleSubmit(form1)">..</form>

然後，你可以通過參數訪問形式傳遞給您的提交處理程序：

$scope.handleSubmit = function(form) { 
    console.log(form.$name) 
}

即

form['input'].$setValidity('server', true);

希望這有助於？

來源

2016-05-16 10:44:30 Gavin

如果我通過範圍傳遞表單名稱，這可能也會起作用。但我剛剛發佈的編輯沒問題，它可以工作。乾杯 –

如何使用ngMessages模塊清除服務器端的angularjs消息

回答

相關問題