如何從控制器通知有關錯誤的視圖

在我看來，我有一個登錄表單。提交後，我在控制器中定義的範圍內調用登錄方法。從這個方法中，我調用一個服務來完成實際的登錄過程。服務方法返回一個承諾。如何從控制器通知有關錯誤的視圖

angular.module('auth').service('authService', ['$q', function($q) { 
    this.login = function(credentials) { 
     var deferred = $q.defer(); 

     // Do stuff and resolve or reject promise 

     return deferred.promise; 
    }; 
}]); 

angular.module('auth').controller('authCtrl'), ['authService', function(authService) { 
    $scope.login = function() { 
     authService.login(credentials).then(
      function(res) { 
       // Successfully logged in 
      }, 
      function(res) { 
       // Report error to view 
      }); 
    }; 
}]);

如何將我的錯誤（由承諾拒絕返回）傳遞給我的視圖？具體到我的表單的特定（或全部）輸入字段的ngModelController。

來源

2014-01-28 user3137652

將錯誤消息添加到作用域，並綁定到視圖中的錯誤消息。

angular.module('auth').controller('authCtrl'), ['authService', function(authService) { 
     $scope.errorMessage; 
     $scope.login = function() { 
     authService.login(credentials).then(
      function(res) { 
      // Successfully logged in 
      }, 
      function(res) { 
       $scope.errorMessage = res; 
      }); 
}; 
}]);

，並在視圖中是這樣的：

<p>{{errorMessage}}</p>

當然，你可以把這個更復雜，但是這給的一般方法的想法。

來源

2014-01-29 00:10:53 Kevin

就像我在我的問題中說的，我真的很想利用實際的AngularJS驗證系統並將錯誤分配給ngModelController。使用您的方法，我無法將驗證錯誤添加到單個輸入字段，並且我還複製了現有功能（錯誤報告）。 – user3137652

在您提交/發佈表單之前，通常會進行驗證。這個想法是，如果表單無效，可以避免請求/響應。在我看來，你並沒有試圖驗證，而是顯示錯誤，如果出現錯誤的服務器端。如果你真的想使用驗證器，請看看使用控制器$ setValidity。 – Kevin

在提交表單之前，您無法驗證所有內容 - 有些驗證必須是服務器端。當請求失敗時，最好將錯誤狀態設置爲實際上錯誤的輸入字段。您在這裏描述的方法可能適用於一般錯誤消息，但不適用於特定輸入。此外，視覺錯誤指示（如引導程序'錯誤'類）不會附加到輸入。我如何使用$ setValidity，如果我無法訪問我的controllre中的ngModelController？ – user3137652

我沒有代碼形式的特定答案，但是我認爲您可以訪問在控制器中提交的表單，解析出您的錯誤並將其應用於相應的字段。

您可以以編程方式調用窗體中的項目上的$ setValidity（reason，flag），我認爲這就是您的想法。 angular docs顯示可用的方法。

所以，你會做這樣的事情

// on error 
function(res) { 
    if (res.error === 'User exists') { 
    $scope.loginForm.user.$setValidity('User is taken',false); 
    } 
}

這當然需要，你可以在字段的用戶決定是基於服務器響應的問題 - 如果你想顯示相應的消息到現場。

來源

2014-01-29 20:09:06

當然你也想在服務器上進行驗證，這是不言而喻的。然而，理想情況下，您將獨立於發佈表單執行表單驗證 - 這將提供更好的用戶體驗。在這個特定的場景中，我沒有看到服務器端會發生什麼類型的驗證。您正在驗證用戶。據推測，他們的證件是必需的。可能的話，你可能需要一個格式驗證器來確保他們使用的是電子郵件地址或其他東西。除此之外，如果用戶輸入了錯誤的憑據，則顯示錯誤信息很有用，例如401 ...。請記住，無效憑證與無效表單不同。然而，你可以執行您所需的服務器端驗證的一種方法是使用自定義的驗證：

app.directive('myCustomValidator', ['$http', function($http) { 
    return { 
    require: 'ngModel', 
    link: function(scope, el, attrs, ctrl) { 
     $http({ 
      method: 'POST', 
      url: '/api/validateSomething/', 
      data: {'value': el.val()} 
     }).success(function(data, status, headers, cfg) { 
      ctrl.$setValidity('myValidationKey', data.isValid); 
     }).error(function(data, status, headers, cfg) { 
      ctrl.$setValidity('myValidationKey', false); 
     }); 
    } 
    } 
}]);

這個代碼是不是全包了，我沒有測試它，但希望它給你一個一種方法的想法。

來源

2014-01-29 20:31:57 Kevin

如何從控制器通知有關錯誤的視圖

回答

相關問題