2016-07-07 3 views
4

Um max Buchstaben Nummer für Textfeld gesetzt, wir, dass durch Schreiben erreichen: <textarea maxLength="50"></textarea>Angular2 maxLength für Textbereich als Variable

aber konnte ich etwas tun, wie unten? Gibt es einen Weg?

import { Component } from '@angular/core'; 

@Component({ 
    moduleId: module.id, 
    selector: 'app-create-offer-page', 
    template: ` 
    <textarea maxLength="textareaLength"></textarea> 
    ` 
}) 
export class CreateOfferPageComponent { 
    textareaLength: number = 50; 
} 

Ich frage, weil das nicht funktioniert. Dies sollte funktionieren für native Validierung

Antwort

10

Sie würden [] für Angular müssen sie interpretieren als

[maxLength]="textareaLength" 

verbindlich. Angular2-Validierer unterstützen derzeit keine dynamischen Werte.

+0

Vielen Dank. Es funktioniert wie ein Zauber, aber ich merke, dass attr.maxLength auch funktioniert. Gibt es eine gute Übung, um Attr hinzuzufügen? vor Attributen? – elzoy

+2

'maxLength' ist ein natives Attribut und kann somit direkt mit' [maxLength] 'verknüpft werden. Wenn Sie beispielsweise ein benutzerdefiniertes Attribut wie 'data-id' festlegen möchten, können Sie die Bindung mit' [attr.data-id] 'verwenden. Am Ende macht es keinen Unterschied für diese nativen Attribute. – rinukkusu

+1

Ich sehe! Danke für Ihre Hilfe. Einen schönen Tag noch. – elzoy

4

sicher und es ist ziemlich einfach - wie so verwenden Attribut Bindung:

<textarea [attr.maxLength]="textareaLength"></textarea> 
+1

Vielen Dank. Ich bedauere, dass ich zwei Antworten nicht akzeptieren kann, aber Sie waren ungefähr 9 Sekunden zu spät. Aber natürlich, Punkt für dich :) – elzoy

1

ein wenig auf der von @rinukkusu vorgesehenen Antwort Erweiterung, könnten Sie sogar das Attribut optional machen durch einen ternären Operator hinzufügen, wie so:

<textarea [attr.maxLength]="textareaLength > 0 ? textareaLength : null"></textarea> 

der null Wert entfernt das Attribut vollständig aus dem Element, das etwas, was ich brauchte.