83

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

問題は、入力で指定された検証用の正規表現と、ng-pattern angular ディレクティブを利用していることです。私が直面している問題は、ユーザーが無効な電話番号を入力し、ボックスをチェックしてその入力を無効にした場合 (したがって、それ以上の検証は必要ありません)、フォームは ng-pattern に基づいて無効であるため、送信を許可しないことです。

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;
        }
    };
4

7 に答える 7

176

これは興味深い問題であり、複雑な Angular 検証です。次のフィドルは、あなたが望むものを実装しています:

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

詳細

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

ノート

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

新しいディレクティブが必要ない場合、汚い(しかし小さい) ソリューションは次のようになります。

$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" />

これは実際には angular をだまして、 の代わりに を考慮したメソッドを呼び出します。 test()RegExp.test()required

于 2013-09-24T14:48:21.853 に答える
25

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

<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 番目の入力は非表示になるだけでなく、まったくレンダリングされないため、フォームは検証に合格し、ボタンが有効になり、必要なものが得られます。

于 2014-07-23T08:30:33.883 に答える
5

使用パターン：

 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">
于 2014-10-29T17:37:35.510 に答える
2 

 <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">

于 2015-05-08T06:07:42.513 に答える