web-dev-qa-db-fra.com

Pourquoi Angularjs ng-pattern ne fonctionne-t-il pas avec l'expression rationnelle suivante?

Pour une raison quelconque, la valeur initialisée n'apparaît pas dans le champ, mais le second champ sans le motif ng fonctionne. des idées?

    angular.module('app', []).controller('MainCtrl', function($scope) {
      $scope.widget = {title: 'abc', title2: 'abc'};
    });

    <div ng-app="app" ng-controller="MainCtrl">
     <input ng-model="widget.title" required ng-pattern="/[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/">
     <br /><br />   
     input 1: {{ widget.title }}
     <br /><br />   
     <input ng-model="widget.title2" required>
     <br /><br />   
     input 2: {{ widget.title2 }}
    </div>

Voici le violon http://jsfiddle.net/wkzab/1/

javascriptangularjsregexangularjs-scopeangularjs-model
16
Will

METTRE &AGRAVE; JOUR

Je me suis penché un peu dessus (jamais vraiment utilisé Angular), et en utilisant l'attribut name sur le formulaire et les entrées, vous pouvez saisir une erreur comme dans mon plus récent JSFiddle . Son dans le format: {{formName.inputName.$error}}. Cela retourne un objet avec des paramètres égaux à un booléen. Donc, {{form.title.$error.pattern}} sera true en cas d'erreur dans l'expression régulière (pour que vous puissiez afficher l'erreur). J'ai également nettoyé (fonctionne la même chose) votre regex à: /^[A-Z]{4}\d{6}[A-Z\d]{3}$/i.

VIEUX

L'attribut ng-pattern tente de faire correspondre le champ en fonction de cette expression régulière: /[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/ . Cela se traduit par 4 caractères alphabétiques, 6 chiffres et 3 caractères alphanumériques. Une fois que vous avez un motif correspondant, il apparaîtra.

Vous devriez pouvoir supprimer l'attribut ng-pattern ou modifier l'expression pour qu'elle soit moins spécifique. Par exemple, ceci JSFiddle acceptera n'importe quelle valeur tant que la chaîne entière est alphanumérique. Mettez à jour la question si vous souhaitez obtenir de l'aide avec un modèle différent.

19
Sam

Moi aussi je faisais face au même problème. J'ai trouvé une solution de contournement pour le faire.

Vous devez faire quelque chose comme ça dans votre contrôleur.

$scope.myRegex = /[a-zA-Z]{4}[0-9]{6,6}[a-zA-Z0-9]{3}/; (ne mettez pas d'expression entre guillemets)

Finalement

<input ng-model="widget.title" required ng-pattern="myRegex">

Cela va maintenant fonctionner.

41
Ved

Oui en effet! Cela me causait un problème de ... laisser les guillemets dehors est ce qui me l'a corrigé.

 $scope.regVal= /([A-Z]{3}\s?(\d{3}|\d{2}|d{1})\s?[A-Z])|([A-Z]\s?(\d{3}|\d{2}|\d{1})\s?[A-Z]{3})|(([A-HK-PRSVWY][A-HJ-PR-Y])\s?([0][2-9]|[1-9][0-9])\s?[A-HJ-PR-Z]{3})/;
0
EltonFlow