web-dev-qa-db-ja.com

Angularjs動的ngパターン検証

チェックボックスがfalseの場合、ng-requiredディレクティブを使用してテキスト入力の検証を強制するフォームがあります。チェックボックスがtrueの場合、フィールドは非表示になり、ng-requiredはfalseに設定されます。

問題は、ng-pattern angleディレクティブを利用するだけでなく、入力で指定された検証用の正規表現も持っていることです。私が直面している問題は、ユーザーが無効な電話番号を入力した場合、その入力を非アクティブ化するためにボックスをチェックする（したがって、それ以上検証する必要がない）ため、フォームはngパターンに基づいて無効であるため、送信を許可しないということです。

Ng-change関数を追加して入力モデルをnullに設定することでこの問題を解決しようとしましたが、ng-pattern、したがってフィールドはチェックボックスの初期セットでfalseに無効に設定されたままです。ただし、チェックボックスをオフにして、すべてを最初のフォームのロードに設定し直してからもう一度チェックボックスをオンにすると、フォームは有効で送信できます。何が欠けているのかわかりません。ここに私がこれまでに持っているng-changeコードがあります：

    var phoneNumberRegex = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    $scope.phoneNumberPattern = phoneNumberRegex;
    $scope.removeValidation = function() {
        if ($scope.cell._newUser === false) {
            $scope.request._number = '';
            $scope.phoneNumberPattern = /[0-9a-zA-Z]?/;
        } else {
            $scope.phoneNumberPattern = phoneNumberRegex;
        }
    };
angularjsangularjs-directiveangularjs-ng-change
84
Brian

これは興味深い問題で、複雑なAngular検証です。次のフィドルは、必要なものを実装します。

http://jsfiddle.net/2G8gA/1/

詳細

Angularのng-requiredとng-patternのinput[type=text]コードを組み合わせた新しいディレクティブrpatternを作成しました。それは、フィールドのrequired属性を監視し、regexpで検証するときにそれを考慮します。つまり、必要でない場合は、フィールドをvalid-patternとしてマークします。

ノート

  • ほとんどのコードはAngularからのもので、このニーズに合わせて調整されています。
  • チェックボックスがオンの場合、フィールドは必須です。
  • 必須のチェックボックスがfalseの場合、フィールドは非表示になりません。
  • 正規表現はデモ用に簡略化されています（有効は3桁です）。

dirty（しかし、より小さい）解決策は、新しいディレクティブが必要ない場合、次のようなものになります。

$scope.phoneNumberPattern = (function() {
    var regexp = /^\(?(\d{3})\)?[ .-]?(\d{3})[ .-]?(\d{4})$/;
    return {
        test: function(value) {
            if( $scope.requireTel === false ) {
                return true;
            }
            return regexp.test(value);
        }
    };
})();

HTMLでは、変更は必要ありません。

<input type="text" ng-model="..." ng-required="requireTel"
    ng-pattern="phoneNumberPattern" />

これは、実際に、requiredを考慮に入れるtest()の代わりにRegExp.test()メソッドourを呼び出すように角度をだます。

174
Nikos Paraskevopoulos

ニコスの素晴らしい答えから何も奪わないで、おそらくもっと簡単にこれを行うことができます：

<form name="telForm">
  <input name="cb" type='checkbox' data-ng-modal='requireTel'>
  <input name="tel" type="text" ng-model="..." ng-if='requireTel' ng-pattern="phoneNumberPattern" required/>
  <button type="submit" ng-disabled="telForm.$invalid || telForm.$pristine">Submit</button>
</form>

2番目の入力に注意してください：ng-ifを使用して、フォームのレンダリングと検証を制御できます。 requireTel変数が設定されていない場合、2番目の入力は非表示になるだけでなく、まったくレンダリングされないため、フォームは検証に合格し、ボタンが有効になり、必要なものが得られます。

25
kumar_harsh

使用パターン：

 ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"

使用される参照ファイル：

 '<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>'

入力の例：

 <input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
5
Anil Singh

先日、これに遭遇しました。

上記よりも簡単だと思われるのは、スコープの変数にパターンを設定し、ビューのng-patternでそれを参照することです。

「チェックボックスがオフになっている」場合、onChangedコールバックで正規表現の値を/.*/に設定します（オフになっている場合）。 ng-patternは変化するものを選び、「OK、あなたの値は問題ありません」と言います。フォームが有効になりました。また、フィールドから不良データを削除して、明らかに不良電話＃がそこにないようにします。

Ng-requiredに関して追加の問題があり、同じことをしました。魅力のように働いた。

2
jessewolfe
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<input type="number" require ng-pattern="/^\d{0,9}(\.\d{1,9})?$/"><input type="submit">
2
Jijo Paulose

NgModel $ viewValueが、属性値で指定されたAngular式を評価して見つかったRegExpと一致しない場合、パターン検証エラーキーを設定します。式がRegExpオブジェクトに評価される場合、これは直接使用されます。式が文字列に評価される場合、^文字と$文字でラップした後にRegExpに変換されます。

この質問で最も投票された回答は更新する必要があるようです。なぜなら、私がそれを試してみると、test関数と検証が機能しないためです。

Angular docs からの例は私にとってはうまくいきます：

組み込みバリデーターの変更

html

<form name="form" class="css-form" novalidate>
  <div>
   Overwritten Email:
   <input type="email" ng-model="myEmail" overwrite-email name="overwrittenEmail" />
   <span ng-show="form.overwrittenEmail.$error.email">This email format is invalid!</span><br>
   Model: {{myEmail}}
  </div>
</form>

js

var app = angular.module('form-example-modify-validators', []);

app.directive('overwriteEmail', function() {
    var EMAIL_REGEXP = /^[a-z0-9!#$%&'*+/=?^_`{|}~.-]+@example\.com$/i;

    return {
        require: 'ngModel',
        restrict: '',
        link: function(scope, Elm, attrs, ctrl) {
            // only apply the validator if ngModel is present and Angular has added the email validator
            if (ctrl && ctrl.$validators.email) {

                // this will overwrite the default Angular email validator
                ctrl.$validators.email = function(modelValue) {
                    return ctrl.$isEmpty(modelValue) || EMAIL_REGEXP.test(modelValue);
                };
             }
         }
     };
 });

Plunker

0
theodor