validators - angularjs maxlength limit




ng-maxlength vermasselt mein Modell (5)

Ich versuche ein einfaches Textfeld mit "so vielen verbleibenden Zeichen" zusammen mit der Validierung zu erstellen. Wenn ich mein Formular mit ng-maxlength validiere, wird mein Charcount zurückgesetzt, sobald die Länge die maximale Länge erreicht. plunkr hier das plunkr Irgendwelche plunkr ?

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

Alternativ können Sie neben ng-maxlength auch das Standardattribut html maxlength 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>

Dies wird bei "15" Zeichen abgeschnitten, wie es die maxlength immer getan hat, und zusätzlich können Sie mit der ng-maxlength benutzerdefinierte Nachrichten ng-maxlength , wenn das Limit erreicht ist.

Klicken Sie hier für ein Plunker-Beispiel


Eine Alternative, die ich verwende, besteht darin, dasselbe Verhalten wie der ng-maxlength-Validator beizubehalten, die Länge jedoch über ein zusätzliches Attribut 'actual-length' zurückzuspeisen.

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

Hier ist das Element mit dem zusätzlichen Attribut:

<textarea name="myTextarea" new-maxlength="100" actual-length="actualLength" ng-model="text"></textarea>

Ich denke, ich habe eine bessere Lösung: die maximale Länge einstellen, wenn die ng-maximale Länge vorhanden ist.

Auf diese Weise erhalten Sie beide Funktionen gleichzeitig: Winkelprüfungen + abgeschnittener Text

.directive("textarea", function () {
    return {
        restrict: "E",
        link: function (scope, elem, attrs) {
            if (angular.isDefined(attrs["ngMaxlength"])) {
                attrs.$set("maxlength", attrs["ngMaxlength"]);
            }
        }
    };
})

Wenn Ihr Textbereich 15 Zeichen überschreitet, wird das result undefined - genau so funktionieren die Anweisungen ng-min/maxlength . Ich denke, Sie müssen Ihre eigene Direktive schreiben. Hier ist eine Anweisung, die die Eingabe nach 15 Zeichen blockiert:

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

fiddle

Update: um mehr als 15 Zeichen zuzulassen, aber deaktivieren Sie die Senden-Schaltfläche, wenn die Anzahl 15 überschreitet:

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

fiddle


Wie im doc , setzt die Funktion $ validate das Modell auf undefiniert, wenn die Gültigkeit ungültig wird.

Wir können dieses Verhalten jedoch trotzdem verhindern, indem allowInvalid: true den ng-model-Optionen allowInvalid: true hinzufügen.

Ändern Sie einfach Ihren Code wie folgt:

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




ng-maxlength