7

私はこの要素を持っています:

<input type="text" name="azurerepo" 
    ng-model="item.azurerepo" 
    ng-class="{error: myForm.azurerepo.$invalid}" 
    ng-required="item.deploymentType=='azure'" 
    ui-event="{ blur : 'azureCallback()' }" />

コールバックは次のことを行います。

$scope.myForm.azurerepo.$setValidity('azurerepo',false);

データを入力して入力を終了すると、無効に設定されます。

入力に戻ると、入力したすべてのデータをバックスペースしてから、まだ無効な何かを入力します! データが入力されているので、有効になると思います。

4

1 に答える 1

8

単純なディレクティブを作成する代わりに angular-ui を使用することにした理由はわかりませんが、ディレクティブにkeyupイベントを追加しui-event、関数を呼び出してtrueここで有効性を設定することは可能だと思います。

ただし、カスタム ディレクティブを使用してシンプルに保つことをお勧めします。

yourApp.directive('checker', function () {
  return {
    restrict: 'A',
    scope: {
        checkValidity: '=checkValidity' // isolate directive's scope and inherit only checking function from parent's one
    },
    require: 'ngModel', // controller to be passed into directive linking function
    link: function (scope, elem, attr, ctrl) {
        var yourFieldName = elem.attr('name');

        // check validity on field blur
        elem.bind('blur', function () {
            scope.checkValidity(elem.val(), function (res) {
                if (res.valid) {
                    ctrl.$setValidity(yourFieldName, true);
                } else {
                    ctrl.$setValidity(yourFieldName, false);
                }
            });
        });

        // set "valid" by default on typing
        elem.bind('keyup', function () {
            ctrl.$setValidity(yourFieldName, true);
        });
    }
   };
 });

そしてあなたの要素：

<input name="yourFieldName" checker="scope.checkValidity" ng-model="model.name" ng-required=... etc>

およびコントローラーのチェッカー自体:

function YourFormController ($scope, $http) {
    ...
    $scope.checkValidity = function (fieldValue, callback) {
       $http.post('/yourUrl', { data: fieldValue }).success(function (res) {
          return callback(res);
       });
    };
    ...
}
于 2013-05-30T20:15:58.220 に答える