Angularjs Dynamic ng-pattern validation

Question

J'ai un formulaire que si une case à cocher est faux applique de validation sur une saisie de texte à l'aide de la ng-requis de la directive. Si la case est vrai, le champ est masqué et le ng-requis est défini sur false.

Le problème est que j'ai aussi un regex pour la validation spécifié sur l'entrée ainsi en utilisant la ng-modèle angulaire de la directive. La question que je suis en cours d'exécution en est que si un utilisateur remplit un numéro de téléphone invalide, coche la case pour désactiver cette entrée (et, par conséquent, n'est plus à la validation) le formulaire ne sera pas permettre la soumission comme il est invalide dans les ng-modèle.

J'ai tenté de résoudre ce problème en ajoutant une ng-changement de fonction pour définir le modèle d'entrée null, cependant la ng-modèle et donc le champ est toujours valide sur l'ensemble initial de la case à false. Si j'ai décocher la case, le réglage de tout retour à la forme initiale de la charge, puis cochez la case de nouveau, le formulaire est valide et capable de se soumettre. Je ne suis pas sûr de ce que je suis absent. Voici la ng-modifier le code j'ai à ce jour:

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

Answer 1

C'est un problème intéressant, complexe Angulaire de validation. La suite de violon met en œuvre ce que vous voulez:

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

Détails

J'ai créé une nouvelle directive, rpattern, qui est un mélange de Angulaire de l' ng-required et de la ng-pattern code de input[type=text]. Ce qu'il fait est de regarder la required de l'attribut de domaine et de le prendre en compte lors de la validation avec les regexp, c'est à dire si pas nécessaire de marquer le champ en tant que valid-pattern.

Notes

• La plupart du code est Angulaires, adaptés aux besoins de cette
• Lorsque la case est cochée, le champ est obligatoire
• Le champ n'est pas caché lorsque la case est faux
• L'expression régulière est simplifié pour la démo (valable 3 chiffres)

---

Une sale (mais plus petite) de la solution, si vous ne voulez pas d'une nouvelle directive, serait quelque chose comme:

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

Et dans le HTML ne change rien:

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

Cela fait des trucs angulaire en appelant notre test() méthode, au lieu de RegExp.test(), qui prend hte tenus en compte.

Answer 2

Ne rien enlever à la réponse impressionnante de Nikos, vous pouvez peut-être le faire plus simplement:

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

Faites attention à la deuxième entrée: nous pouvons utiliser un ng-if pour contrôler le rendu et la validation dans les formulaires. Si la variable requireTel n'est pas définie, la deuxième entrée sera non seulement masquée, mais pas rendue du tout. Le formulaire sera ainsi validé et le bouton activé, et vous obtiendrez ce dont vous avez besoin.

Answer 3

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

Cela pourrait aussi aider à utiliser la validation de ng-pattern dans angularjs