Angular 2 Twitter Zeichen Countdown am Eingang

Question

Ich versuche, einen "Zeichen Countdown" in Angular 2 auf einem Eingabeelement zu implementieren, ähnlich wie Twitter die 140 Zeichen Grenze erzwingt und den Benutzer in Echtzeit aktualisiert. Ich möchte dem Benutzer zeigen, wie viele Zeichen er in Echtzeit zurückgelassen hat, so dass der Benutzer in die Eingabe, die Zeichen-Countdown-Aktualisierungen eintippt und schließlich "0" erreicht, während der Benutzer weiter tippt.

Ich verstehe, wie die "maxlength" auf dem Eingabeelement erzwingen, aber ich bitte um Anleitung, wie Sie den Countdown implementieren. Dies ist eine ähnliche Anfrage an die Angular 1 Beitrag hier: angularjs text area character counter

Ist jQuery hier notwendig, oder gibt es eine "Angular 2 Way" durch Bindung, die funktionieren würde?

Answer 1

können Sie binden [(ngModel)] und (Druck) mit dem Eingang:

@Component({ 
    selector: 'my-app', 
    template: `<input [(ngModel)]="currentText" (keypress)="changed()"> 
     chars left : {{ charsLeft }} 
    ` 
}) 
export class AppComponent { 
    public currentText: string = ''; 
    public charsLeft: string = 140; 

    changed() { 
    this.charsLeft = 140 - this.currentText.length; 
    } 
} 

Arbeiten Plunker: http://plnkr.co/edit/ET38TnbDLdKuHEQ9e2cb?p=preview

Answer 2

Es gibt viele Möglichkeiten, es zu tun. Sie können es auch mit Rohr tun. Aber hier werde ich Ihnen zeigen, wie Sie es innerhalb der Komponente tun können.

Dies ist angular2 way. Demo

Arbeits: https://plnkr.co/edit/QTn81qKBAi0mD15b94Hs?p=preview

@Component({ 
    selector: 'my-app', 
    template: ` 

    <label><b>Tweet</b></label> 
    <bR> 
    <textarea cols=40 rows=3 (keyup)="count(tweetmsg)"  
       [(ngModel)]="tweetmsg" 
       > 
    </textarea> {{characterleft}} charcter(s) left 

    `, 

}) 
export class AppComponent { 
    maxlength=20; 
    characterleft=this.maxlength; 

    count(msg){ 
    if(this.maxlength>=msg.length){ 
     this.characterleft=(this.maxlength)-(msg.length); 
    } 
    else{ 
     this.tweetmsg = msg.substr(0, msg.length - 1); 
     console.log(msg); 
    } 
    } 
} 

Answer 3

Sie ein Rohr für sie erstellen:

import { Pipe, PipeTransform } from '@angular/core'; 


@Pipe({ 
    name: 'countdown', 
    pure: true 
}) 

export class CountdownPipe implements PipeTransform { 
    transform(text: string, args: number) { 
    let maxLength = args || 0; 
    let length = text.length; 

    return (maxLength - length); 
    } 
} 

Ihre HTML

<label> {{myText | countdown}} characters remaining</label> 

Dies ist ein Arbeits Plunker: http://plnkr.co/edit/mtGpkhLW77Jimtdtymbh?p=preview

Answer 4

<small class="form-text text-muted"><code>{{2000- incidentDescription.value.length}} </code> Remaining characters</small> 
    <textarea id="incidentDesc" #incidentDescription class="form-control" formControlName="incidentDesc" maxLength="2000"></textarea> 

Hinzufügen eines Verweises auf das Steuerelement #incidentDescription. Dann die maxLenght an die Steuerung einzustellen, führen Sie dann die Mathematik im Codeblock {{2000- incidentDescription.value.length}}

Answer 5

Hallo mit Winkel Richtlinie Versuchen Sie wie folgt vor:

import { Directive, HostListener, ElementRef, Input, ViewChild, } from '@angular/core'; 
import { NgControl } from '@angular/forms'; 
/** 
* For Showing the character left. 
*/ 
@Directive({ 
    selector: '[characterLeft]', 
}) 
export class CharacterLeftDirective { 

    @Input() maxLength: string; 
    public textValue: string; 
    constructor(private elRef: ElementRef, private _ngControl: NgControl) { 
    } 
    private _showMessage(maxLength, textLength): void { 
    this.elRef.nativeElement.nextElementSibling.innerHTML = maxLength - textLength + ' Character(s) left' 
    } 
    @HostListener('keyup', ['$event']) toDecimal($event: any) { 
    $event.preventDefault(); 
    const value: any = $event.target.value; 
    if (value) { 
     this._showMessage(this.maxLength, value.length); 

    } else { 
     this._showMessage(this.maxLength, 0); 
    } 
    } 
} 

In HTML

<textarea formControlName="message_content" class="form-control mb-2" rows="8" placeholder="" [maxLength]="160" characterLeft maxlength="160"></textarea> 
        <div class="text-danger"></div>