カスタムフィールド検証の作成

次のコード/ plunkrがあり、何らかの理由でform.name。$ invalidが常にtrueです（入力ボックスの直後のスパンを参照）。 Angularのドキュメントでは、$ invalid値がどのように設定されているかについてはあまり言及していません。私はctrl.$error.taken = true/falseを持っているjavascriptと何か関係があり、$ errorオブジェクトセットの$を真に無効にするオブジェクトを持っていることがあります。舞台裏でどのように角張った作品が私を助けてくれるの？カスタムフィールド検証の作成

名前が正規表現と一致しない場合は表示するには「名前は英数字でなければなりません」というエラーを表示したいが、その名前がリストの名前である場合は「名前は既に取得済み」というエラーを表示する。フィールドがこれらの2つのエラーのいずれかである場合、私はまた、テキスト "エラー"を表示する。「エラー」という言葉が常に表示されることを除いて、これらのすべての機能が働いています。私は、$ invalidを使用するangleの標準に従おうとしています。

ビュー：

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Example - example-forms-async-validation-production</title> 


    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="script.js"></script> 
</head> 
<body ng-app="form-example1"> 
    <form name="form" class="css-form" novalidate> 
    <div> 
    Username: 
    <input type="text" ng-model="name" name="name" username /> 
     <span ng-show="form.name.$invalid">error</span> 
    <br />{{name}}<br /> 
    <span ng-show="form.name.$error.badContent">Name must be alpha-numeric</span> 
    <span ng-show="form.name.$error.taken">Name is already taken!</span> 
    </div> 
</form> 
</body> 
</html>

スクリプト：

(function(angular) { 
    'use strict'; 
var app = angular.module('form-example1', []); 

var NAME_REGEXP = /^([a-zA-Z0-9])*$/; 
app.directive('username', function() { 
    return { 
    require: 'ngModel', 
    link: function(scope, elm, attrs, ctrl) { 
     var names = ['Jim', 'John', 'Jill', 'Jackie']; 

     ctrl.$validators.username = function(modelValue, viewValue) { 
     if (ctrl.$isEmpty(modelValue)) { 
      return true; // consider empty model valid 
     } 

     ctrl.$error.taken = names.indexOf(modelValue) > -1; 
     ctrl.$error.badContent = !NAME_REGEXP.test(modelValue); 

     return !ctrl.$error.taken && !ctrl.$error.badContent; 
     }; 
    } 
    }; 
}); 
})(window.angular);

Plunkr： https://plnkr.co/edit/LBRR14PpjAQigafOVTgQ?p=preview

出典

2016-10-17 theB3RV

利用別々のディレクティブ英数字を検証するための1、およびユーザ名既に取ら問題の1。
$ ctrl.validators.alphaNumericは$ error.alphaNumericをFormControllerで公開します。 $ error.xxxの値を操作する必要はなく、バリデータの戻り値に基づいて自動的に設定されます。
plunkrを確認してください。
また参照してくださいhttps://code.angularjs.org/1.5.8/docs/api/ng/type/ngModel.NgModelController 私はこれを確認していませんが、今は$ error.alphaNumericが設定されているため、ng-invalid-alpha-numericエラークラスが必要です。

JS

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope) { 
    $scope.model = {}; 
}); 

app.directive('validateAlphaNumeric', function() { 

    var REGEX = /^([a-zA-Z0-9])*$/; 

    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 

     ctrl.$validators.alphaNumeric = function (modelValue, viewValue) { 

    if (REGEX.test(viewValue)) { 
     return true 
    } 
    return false; 
     }; 

    } 
    }; 
}); 

app.directive('validateUserNotTaken', function() { 

    return { 
    require: 'ngModel', 
    link: function (scope, element, attrs, ctrl) { 
     var names = ['Jim', 'John', 'Jill', 'Jackie']; 
     ctrl.$validators.userNotTaken = function (modelValue, viewValue) { 

    if (names.indexOf(modelValue) == -1) { 
     return true 
    } 
    return false; 
     }; 

    } 
    }; 
});

HTML

<body ng-controller="MainCtrl"> 
    <form name="myForm"> 
     <input type="text" validate-alpha-numeric validate-user-not-taken ng-model="model.value1"> 
     <p ng-if="myForm.$error.alphaNumeric">Should be alphanumeric</p> 
     <p ng-if="myForm.$error.userNotTaken">User Exists!</p> 
     <p ng-if="myForm.$error.alphaNumeric || myForm.$error.userNotTaken">Error</p> 
    </form> 
    </body>

ワーキングplunkr：https://plnkr.co/edit/MZ7DMW?p=preview

出典

2016-10-17 21:21:47 Mahesh

両方の検証関数を同じディレクティブに追加できますか？ – theB3RV

このバリデーターは私が探していたものでした！同じディレクティブに複数のバリデーターを持つことは許されています。 – theB3RV

カスタムフィールド検証の作成

答えて

関連する問題