0

サーバーから受け取った入力検証エラーを表示する角度のあるフォームを作成しました。私のソリューションは、1 つの小さな問題を除いて正常に機能します。値のないフォームを送信すると、ページが読み込まれた後、サーバーから正しい応答、つまり 422 が返されますが、検証エラーは表示されません。入力に値を入力し始めると、検証エラーが点滅して消えます。

私のディレクティブと関係があることはほぼ確実ですが、修正方法はわかりません。これは私の現在のディレクティブ コードです:

var appServices = angular.module('webFrontendApp.directives', []);

appServices.directive('serverError', function(){
  return {
    restrict: 'A',
    require: '?ngModel',
    link: function(scope,element,attrs,ctrl){
      element.on('change keyup', function(){
        scope.$apply(function(){
          ctrl.$setValidity('server', true);
        });
      });
    }
  };
});

問題は、このコードの element.on('change keyup'.... セクションにあると思います。そのため、入力を開始するとエラーメッセージが点滅します。また、これを「change keyup」ではなく「change」に変更すると、 、入力を開始すると、エラーメッセージが永続的に表示されます。

初めて送信する前に入力に値を入力しなかった場合でも、エラーメッセージを表示する方法を知っている人はいますか?

コメントごとに更新

ここに私のフォームがあります：

<form ng-submit="create(memberData)" name="form" novalidate>
  <div class = "row form-group" ng-class = "{ 'has-error' : form.email.$dirty && form.email.$invalid }">
     <input type="text" ng-model="memberData.email" placeholder="janedoe@mail.com"  name="email" class="col-xs-12 form-control" server-error>

     <span class="errors" ng-show="form.email.$dirty && form.email.$invalid">
       <span class="glyphicon glyphicon-remove form-control-feedback"></span>
       <span ng-show="form.email.$error.server">{{errors.email}}</span>
     </span>
  </div>
  <div class="row">
    <button type="submit" class="btn btn-danger col-xs-12">Join Private Beta</button>
  </div>
</form>

そして私のコントローラー：

$scope.memberData = {};
$scope.create = function() {
    var error, success;
    $scope.errors = {};
    success = function() {
      $scope.memberData = {};
    };    
    error = function(result) {
        angular.forEach(result.data.errors, function(errors, field) {
            $scope.form[field].$setValidity('server', false);
            $scope.errors[field] = errors.join(', ');
        });    
    };



    BetaMember.save({ beta_member: { email: $scope.memberData.email || "" }}).$promise.then(success, error);

};
4

2 に答える 2

0

フォーム自体には $setValidity メソッドがないため、ng-model がないため、サーバー エラーが単一のフィールドを参照していないと仮定すると (この場合は $setValidity メソッドが優先されます)、私は思います最も簡単な解決策は次のとおりです。

ランダムな検証 (これには少なくともユーザー名が必要です) と、カスタム サーバー エラーを表示できる div を含むフォームを作成します。

<div ng-controller="AppCtrl">

    <form novalidate name="createForm">

        <div class="inputWrap">

            <input ng-model="name" name="name" type="text" required placeholder="John Doe">

            <span ng-if="createForm.name.$dirty && createForm.name.$invalid">
                Some kind of error!
            </span>

        </div>

        <div ng-if="serverError">
            {{ serverError.message }}
        </div>

        <input
            value="Join Private Beta"
            ng-disabled="createForm.$invalid || serverError" 
            ng-click="create()"
            type="button">

    </form>

</div>

次に、コントローラーでYourServiceを処理する createメソッドを追加できます( promise を返す必要があります)。応答が失敗した場合は、フォーム ボタンを無効にするのにも役立つカスタム サーバー エラー メッセージを含む単純なオブジェクトを作成できます。必要な場合。

var AppCtrl = function($scope, YourService){

    // Properties

    // Shared Properties

    // Methods
    function initCtrl(){}

    // Shared Methods
    $scope.create = function(){

        YourService.makeCall().then(function(response){

            // Success!

            // Reset the custom error
            $scope.serverError = null;

        }, function(error){

            // Do your http call and then if there's an error
            // create the serverError object with a message
            $scope.serverError = {
                message : 'Some error message'
            };

        })

    };

    // Events

    // Init controller
    initCtrl();

};

AppCtrl.$inject = [
    '$scope',
    'YourService'
];

app.controller('AppCtrl', AppCtrl);

ここでは非常に単純なスニペットです。例を示したかっただけです。複雑なことは何もありませんが、これをさらに拡大することができます。

于 2015-09-06T09:39:20.407 に答える
0

非常に簡単な回避策があったようです。私のビューにはフィルター form.email.$dirty があったため、ユーザーが最初にフォームをクリックせずに送信をクリックしても、エラーは表示されません。

form.email.$dirty を削除し、form.email.$invalid のみを使用すると、完全に機能します。この検証はサーバーの応答に依存し、フォームが送信される前にトリガーされないため、私の場合はこれで十分だと思います。エラーオブジェクトもコントローラーでクリアされ、ページが最初に読み込まれたときにエラーが読み込まれないようにします。

于 2015-09-06T11:48:34.400 に答える