ng-maxlength verschraubt mein Modell

Ich versuche, eine einfache Textarea mit "so viele Zeichen verbleibenden" zusammen mit Validierung zu tun. Wenn ich mit ng-maxlength mein Formular validiere, setzt es mein Charcount zurück, sobald die Länge die maximale Länge erreicht. Hier ist die plunkr Problemumgehungen?ng-maxlength verschraubt mein Modell

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

Quelle

2013-06-12 Riz

Lustige Sache, aber für mich (mit Schräg 1.4.7 + 1.8.7 Typoskript) Verwendung von HTML-Attribute „maxLength“ hatte denselben Effekt wie hier erwähnt "ng-maxLength": Nachdem ein großer Wert (größer als das definierte Limit) direkt in das Modell eingegeben wurde, wird der Wert im Modell undefiniert. Aus meiner Sicht ist dies ein Angular Bug (genau wie [user3232182] (http://stackoverflow.com/users/3232182/user3232182) oben erwähnt). Wahrscheinlich sogar nicht mit ng-maxLength directve verbunden, sondern mit dem ganzen Bindungsmechanismus. – bkg

Wenn Ihr Textfeld 15 Zeichen überschreitet, wird resultundefined —, die gerade ist, wie die ng-min/maxlength Richtlinien arbeiten. Ich denke, du musst deine eigene Direktive schreiben. Hier ist eine Richtlinie, die Eingabe nach 15 Zeichen blockieren:

<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: zu ermöglichen, mehr als 15 Zeichen, aber deaktivieren die Absenden-Button, wenn die Zählung überschreitet 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); 
}

fiddle

Quelle

2013-06-12 22:15:39

vielen Dank. Ich wollte, dass es darüber hinausgeht und negativ wie Twitter zeigt, aber das ist gut genug :) – Riz

@Riz, siehe aktualisierte Antwort. –

brilliant! Dies sollte standardmäßig das ng-maxlength-Verhalten sein. Vielleicht können Sie dies zu eckigen schieben;) – Riz

Alternativ können Sie nur das Standard-HTML-maxlength Attribut neben den ng-maxlength hinzufügen.

<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 cut-off, wie maxlength immer getan hat, und zusätzlich die ng-maxlength können Sie benutzerdefinierte Nachricht zeigen die Grenze bei Erreichen.

Click for Plunker Example

Quelle

2013-08-29 17:59:09

Ich denke, das ist bei weitem der beste Ansatz. –

Dies umfasst auch Einfügen in Text größer als die maximale, danke. –

Ja, das ist, wie ich es funktionierte, obwohl es nicht so effizient ist, da ich den gleichen Wert in beiden Attributen wiederholen müsste ... –

Ich denke, dies als ein Fehler auf Winkel protokolliert werden soll. Es soll nicht Ihr Modell löschen. Ich habe eine Direktive, die eine Dropdown-Auswahl mit einem Textfeld verknüpft und sobald Sie ein Wort einfügen, das es über die maximale Länge geht dann löscht es mein Modell und Textbox.Es soll Seien Sie ein Validierer, wenn Sie das Modell nicht für ungültig halten.

Quelle

2014-02-17 10:42:37 user3232182

Eine Alternative, die ich verwende, besteht darin, das gleiche Verhalten wie beim ng-maxlength-Validator beizubehalten, aber die Länge über ein zusätzliches Attribut 'tatsächliche Länge' zurückzugeben. Hier

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

ist das Element, mit dem zusätzlichen Attribute:

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

Quelle

2014-03-26 09:48:49 PenFold

Ich habe eine bessere Lösung, die ich denke: die maxlength zu setzen, wenn die ng-maxlength vorhanden ist.

Auf diese Weise können beide Funktionen gleichzeitig erhalten: Winkel Validierungen + Text abgeschnitten

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

Quelle

2014-06-24 14:35:23

Dies funktioniert nicht in IE 9 wie ATTR maxlength funktioniert nur in HTML5 – alecellis1985

in der Tat. aber Sie könnten Polyfills für diesen Fall verwenden, denke ich. Beispiel gefunden: http://stackoverflow.com/questions/1125482/how-to-impose-maxlength-on-textarea-in-html-using-javascript/1125521#1125521, obwohl ich nicht versucht habe, es innerhalb der arbeiten Richtlinie, aber ich denke, es ist nicht so schwer. DANKE FÜR DEN TIPP! –

Wenn Sie einen Namen Attribut auf das Textfeld fügen Sie dann eine neue Eigenschaft mit dem Wert im Rahmen geschaffen das Formular, mit dem Sie die Länge Ihres Charakterzählers ermitteln können.

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

Aktualisiert Ihre plnkr

Quelle

2014-11-10 13:44:06 jlooooo

Dieser ist nett und benötigt keinen zusätzlichen Code. Vielen Dank! – yarl

Warum hat diese Antwort nicht mehr Upvotes. So schnell und einfach auf den Punkt. : D Danke und ja bitte – BrettS

Wie die doc sagt, das $ validate Funktionssatz-Modell nicht definiert, wenn Änderungen Gültigkeit ungültig.

Aber wir können immer noch dieses Verhalten verhindern, indem wir einfach allowInvalid: true zu den ng-Modell-Optionen hinzufügen.

So ändern Sie einfach Ihren Code wie:

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

Quelle

2015-05-18 16:32:33 Lutz

Das sollte die richtige Antwort sein –

Danke mein Mann! – Wax

ng-maxlength verschraubt mein Modell

Antwort

Verwandte Themen