J'ai de nombreux champs d'entrée numérique qui ont des valeurs d'attribut min et max qui dépendent de la logique ailleurs dans mon application angularjs, mais lors de la liaison des données dans ces attributs, ils ne sont plus validés par angular, la validation HTML 5 apparaît toujours. Pour les chercher.
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<form name="myForm">
<input type="number" name="one" required="required"
min="10" max="20" ng-model="one" />
<input type="number" name="two" required="required"
min="{{ min }}" max="{{ max }}" ng-model="two" />
<button ng-disabled="!myForm.$valid">Submit</button>
</form>
</div>
</div>
5 Réponses :
Apparemment, nous ne pouvons pas utiliser {{}} s (c'est-à-dire interpolation) pour le min et max champs. J'ai regardé le code source et j'ai trouvé le Suivant: $ interpolate n'est pas appelé, juste parsefloat , vous devez donc spécifier une chaîne qui ressemble à un numéro Pour min et max .
Voilà-y un bug ou quelque chose? Un problème sera-t-il ouvert?
Oui c'est une fonctionnalité manquante
Je pense que tu as tort. L'interpolation pour {{}} est exécutée avant que cela soit appliqué.
Interpolation {{}} fonctionne avec des champs dans Angular 5, la dernière version qu'aujourd'hui
J'ai écrit des directives pour remplir l'écart, ng-min et ng-max:
<3 It. Enregistre mes tracas en écrivant ma propre directive. Merci. Souhaitez-vous soumettre une demande de traction à angularjs?
Vous pouvez essayer de le soumettre (peut-être refacteur pour éviter la répétition d'abord). Le processus de soumission est un peu décourageant pour moi sur angularjs, en particulier lorsque vous êtes sous Windows (difficultés à exécuter des tests), déjà passé des heures à soumettre quelques lignes PR;) - Un autre PR qui a été fermé:
Je suis également sur Windows et non familière avec les unités testant JS. J'ai cherché la liste des émissions, il semble y avoir plusieurs PR clos sur cette question, tous nécessitant la liste de contrôle à effacer avant de soumettre le PR.
Presque parfait, mais var max = périmètre. $ Eval (attr.ngmax) || Infinity; évalue la valeur 0 à l'infini.
Presque presque parfait :) mais dans mon cas, la valeur max ou min peut changer en fonction des autres valeurs, je devais donc utiliser la forme de la montre: portée. $ Watch (fonction () {retour {NGMAX: attr.ngmax}}, fonction () {ctrl. $ setvievalue (ctrl. $ ViewValue);}, true);
@AKOSLUKACS Pouvez-vous fournir une modification ou une autre réponse modifiant ce qui précède. Je ne suis pas sûr où vos suggestions devraient aller.
@ Guillaume86 Quel est le but de portée. $ Watch (attr.ngmin, fonction () {Ctrl. $ Setvievalue (Ctrl. $ ViewValue);}); ?
@JPCF Validation de la gâchette lorsque la valeur minimale change
@Akoslukacs Je n'ai pas la différence avec une montre simple, utilisez-vous {{interpolation}}? Si vous utilisez l'interpolation, il ne semble pas que l'attribut est déjà dynamique ().
Cela ne définit pas le max et min de l'entrée, qui semble être une manquette évidente. Ajoutez ces lignes au "validateur" Fonctions: elem.attr ('Min', min); , elem.attr ('max', max); .
J'ai aussi écrit une directive personnalisée pour cela:
<form name="myform" ng-init="minvalue=0;value=1;maxvalue=2">
Min Value:
<input type="number" name="minvalue" required
data-validate-range="0,value"
ng-model="minvalue">
Value:
<input type="number" name="value" required
data-validate-range="minvalue,maxvalue"
ng-model="value">
Max Value:
<input type="number" name="maxvalue" required
data-validate-range="value,false"
ng-model="maxvalue">
<pre>
myform.minvalue.$error {{ myform.minvalue.$error }}
myform.value.$error {{ myform.value.$error }}
myform.maxvalue.$error {{ myform.maxvalue.$error }}
</pre>
</form>
J'ai face au même problème. obtenu le succès en utilisant cette directive: J'ai eu cette solution de Ce site Web . Pour le code entier, vous pouvez utiliser Ce Site Web
angulaire semble maintenant prendre en charge ng-min et ng-max hors de la boîte sans la nécessité d'écrire vos propres directives. Voir Ce violon qui utilise angulaire 1.4.2.
Il y a une solution pour cela: Révalider le modèle lorsque Min Max Expression Valeurs ...