[解決済み] Angularjs動的ngパターン検証

質問

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

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

入力モデルを null に設定する ng-change 関数を追加してこの問題を解決しようとしましたが、チェックボックスを false に初期設定しても ng-pattern とフィールドは無効と設定されたままです。 しかし、ボックスのチェックを外し、すべてを最初のフォームロードに設定し、再度ボックスをチェックすると、フォームは有効で送信することができます。 何が足りないのかよくわかりません。 以下は、私がこれまでに作成した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;
        }
    };

どのように解決するのですか？

これは興味深い問題で、複雑なAngularのバリデーションです。次のフィドルは、あなたが望むものを実装しています。

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

詳細

新しいディレクティブを作りました。 rpattern これは Angular の ng-required と ng-pattern のコードを input[type=text] . これは required 属性を監視し、 正規表現で検証する際にそれを考慮することです。 たとえば、必須でない場合はフィールドを valid-pattern .

注意事項

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

A 汚い (しかし、より小さい) 解決策は、新しいディレクティブを必要としない場合、次のようなものです。

$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 を考慮しています。