ng-maxlength vis de mon modèle

Je suis en train de faire un simple textarea avec "un grand nombre de caractères restants" le long de la validation.
lorsque j'utilise ng-maxlength pour valider mon formulaire, il réinitialise mon charcount dès que la longueur des hits de la longueur max. Voici la plunkr Aucune solution de contournement?

  <body ng-controller="MainCtrl">
    <div ng-form="noteForm">
      <textarea ng-maxlength="15" ng-model="result"></textarea>
      <p>{{15 - result.length}} chars remaining</p>
      <button ng-disabled="!noteForm.$valid">Submit</button>
    </div>
  </body>
  • Drôle de chose, mais pour moi (à l'aide Angulaire 1.4.7 + Tapuscrit 1.8.7) l'utilisation de l'attribut HTML "maxLength" a le même effet que mentionne ici "ng-maxLength": après la définition de certains de grande valeur (plus grand que la limite définie) directement dans le modèle, la valeur dans le modèle devient indéfini. De mon point de vue, c'est Angulaire de bug (comme user3232182 mentionné ci-dessus). Probablement même pas lié à ng-maxLength directve, mais à l'ensemble du mécanisme de liaison.
InformationsquelleAutor Riz | 2013-06-12
  1. 56

    Lorsque votre textarea est supérieure à 15 caractères, result devient undefined — c'est juste la façon dont le ng-min/maxlength directives de travail. Je pense que vous devez écrire votre propre directive. Voici une directive d'entrée du bloc après 15 caractères:

    <textarea my-maxlength="15" ng-model="result"></textarea>
    app.directive('myMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.myMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          } 
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
});

    violon

    Mise à jour: pour permettre à plus de 15 caractères, mais désactiver le bouton soumettre lorsque le comptage est supérieure à 15:

    link: function (scope, element, attrs, ngModelCtrl) {
  var maxlength = Number(attrs.myMaxlength);
  function fromUser(text) {
      ngModelCtrl.$setValidity('unique', text.length <= maxlength);
      return text;
  }
  ngModelCtrl.$parsers.push(fromUser);
}

    violon

    • merci beaucoup. J'aurais voulu avoir pour aller au delà et de montrer négatif, comme twitter, mais ce est assez bon 🙂
    • génial! ce doit être par défaut ng-maxlength comportement. Peut-être que vous pouvez pousser à l'anguleuses 😉
    • Cette solution a été fonctionne correctement pour moi quand j'ai modifié manuellement une entrée, mais il n'a pas la capture des erreurs avec les valeurs initiales. L'ajout de ngModelCtrl.$formatters.push(fromUser), comme le défaut Angulaire validateurs faire, il fixe.
    • N'utilisez pas de myMaxlength comme il s'appelle lui-même de nouveau $setViewValue si vous collez un texte assez grand. Il est préférable d'utiliser la validation. Je tombe sur "un Maximum d'appel de la taille de la pile dépassé" erreur à cause de cela.
    • Marque Rajcok votre directive ne fonctionne pas avec input type="number"
    • Vous pouvez atteindre ce comportement à l'aide de ng-maxlength si vous ajoutez ng-model-options="{allowInvalid: true}" . Source: stackoverflow.com/a/29132765/592062
    • Je viens de trouver ce code et il a essayé dans un projet à l'aide de AngularJS v1.4.8 et lors de la saisie du texte dans l'entrée, cela fonctionne très bien, mais lorsque l'utilisateur de faire copier coller à partir d'un texte à partir de la page web dans la zone de texte, ce que @NicolaeNamolovan décrit se passe :\

    InformationsquelleAutor Mark Rajcok
  2. 52

    Alternativement, vous pouvez simplement ajouter le standard html maxlength attribut à côté de la ng-maxlength.

    <form name="myForm">
    <textarea name="myTextarea" ng-maxlength="15" maxlength="15" ng-model="result"></textarea>
    <span class="error" ng-show="myForm.myTextarea.$error.maxlength">
         Reached limit!
     </span>
</form>

    Ce sera cut-off " à "15" caractères, comme maxlength l'a toujours fait, et en outre la ng-maxlength vous permet d'afficher de message personnalisé à atteindre la limite.

    Cliquez sur pour Plunker Exemple

    • Je pense que c'est de loin la meilleure approche.
    • Cela couvre également le coller dans le texte plus grand que le max, je vous remercie.
    • Oui, c'est la façon dont je l'ai eu à travailler, bien qu'il n'est pas très efficace car j'aurais besoin de répéter la même valeur dans les deux attributs...
    • Cela ne fonctionne pas pour numéro de type
    • C'est une très mauvaise approche, attribut maxlength est très mauvais quand je suis coller quelque chose, il coupe juste le texte — ce qui n'est pas convivial. Quand je suis coller quelque chose et obtenir de l'erreur de dépassement de capacité, je veux voir mon texte et de décider ce qu'il faut supprimer pour s'adapter à la longueur maximale.
    • C'est facile et meilleure approche
    • fonctionne sur tous les navigateurs... grande approche simplifiée

    InformationsquelleAutor Thalis K.
  3. 17

    Si vous ajoutez un attribut name de la balise textarea puis une nouvelle propriété avec la valeur est créée dans le champ d'application de la forme, que vous pouvez utiliser pour obtenir la longueur de votre compteur de caractères. 

    <body ng-controller="MainCtrl">
  <div ng-form="noteForm">
    <textarea ng-maxlength="15" name="noteItem" ng-model="result"></textarea>
    <p>{{15 - noteForm.noteItem.$viewValue.length}} chars remaining</p>
    <button ng-disabled="!noteForm.$valid">Submit</button>
  </div>
</body>

    Mise à jour de votre plnkr

    • Celui-ci est agréable et pas besoin de code supplémentaire. Merci!
    • Pourquoi est-ce répondre à pas plus upvotes. De manière rapide, facile et précis. 😀 Merci et oui s'il vous plaît
    InformationsquelleAutor jlooooo
  4. 14

    Comme le doc dit, le montant de valider la fonction de modèle défini à l'indéfini lorsque la validité des modifications aux invalides.

    Mais, nous pouvons encore éviter ce problème en ajoutant simplement allowInvalid: true à la ng-modèle-options.

    Donc, il suffit de modifier votre code comme:

    <body ng-controller="MainCtrl">
    <div ng-form="noteForm">
        <textarea ng-maxlength="15" ng-model="result" 
            ng-model-options="{ allowInvalid: true }"></textarea>
        <p>{{15 - result.length}} chars remaining</p>
        <button ng-disabled="!noteForm.$valid">Submit</button>
    </div>
</body>
    InformationsquelleAutor Lutz
  5. 3

    Je pense que cela devrait être enregistré comme un bug sur angulaire. Il n'est pas censé effacer votre modèle.J'ai une directive que les liens d'un menu déroulant, sélectionnez une zone de texte et dès que vous insérez un mot qui fait aller sur la longueur maximale puis il efface mon modèle et de la zone de texte.Il est censé être un validateur de ne pas effacer votre modèle lorsqu'il pense que le modèle n'est pas valide .

    InformationsquelleAutor user3232182
  6. 3

    Une alternative que j'utilise est de conserver le même comportement que la ng-maxlength validateur mais pour nourrir la longueur à l'arrière via un attribut supplémentaire réelle de la longueur'.

    app.directive('newMaxlength', function () {
        return {
            require: 'ngModel',
            scope: {
                maxlength: '=newMaxlength',
                actualLength: '='
            },
            link: function (scope, elem, attr, ngModelCtrl) {

                function validate(ctrl, validatorName, validity, value) {
                    ctrl.$setValidity(validatorName, validity);
                    return validity ? value : undefined;
                }

                var maxlength = parseInt(scope.maxlength, 10);
                var maxLengthValidator = function (value) {
                    scope.actualLength = value ? value.length : 0;
                    return validate(ngModelCtrl, 'maxlength', ngModelCtrl.$isEmpty(value) || value.length <= maxlength, value);
                };

                ngModelCtrl.$parsers.push(maxLengthValidator);
                ngModelCtrl.$formatters.push(maxLengthValidator);
            }
        };
    });

    Ici, c'est l'élément avec l'attribut supplémentaire:

    <textarea name="myTextarea" new-maxlength="100" actual-length="actualLength" ng-model="text"></textarea>
    InformationsquelleAutor PenFold
  7. 0

    J'ai une meilleure solution je pense: pour définir la maxlength si le ng-maxlength est présent.

    Cette façon, vous obtenez les deux fonctions en même temps: angulaire validations + texte coupé

    .directive("textarea", function () {
    return {
        restrict: "E",
        link: function (scope, elem, attrs) {
            if (angular.isDefined(attrs["ngMaxlength"])) {
                attrs.$set("maxlength", attrs["ngMaxlength"]);
            }
        }
    };
})
    • Cela ne marchera pas dans ie 9 comme l'attribut maxlength fonctionne uniquement en HTML5
    • en effet. mais vous pouvez utiliser polyfills pour ce cas, je suppose. Exemple: stackoverflow.com/questions/1125482/..., bien que je n'ai pas essayé de le faire fonctionner au sein de la directive, mais je suppose que ce n'est pas que dur. MERCI POUR L'ASTUCE!
    InformationsquelleAutor Kat Lim Ruiz