CODEWITHSUNDEEP
data-bindingnativescripttextfield
SwaX
SwaX

Reputation: 97

NativeScript empty Textfield after message is send

html:

<StackLayout  class="nt-form chat-wrapper"  >
    <StackLayout loaded="test" id="chat-form" orientation="horizontal" class="nt-input input-field form">
  
   <TextField  
    (textChange)="onTextChange($event)" 
    [text]="inputText"
    width="800px"  
    class="-rounded-lg input" 
    hint="Nachricht" 
    style="background-color: #ffffff;"
></TextField>
        <button width="120px" class="-rounded-lg fa far fas fab" (tap)="sendMessage();" style="margin-left: 15px;" text="&#xf1d8;"></button>
    </StackLayout>
</StackLayout>

ts:


@Component({
    selector: "ItemDetail",
    styleUrls: ['item-detail.component.css'],
    templateUrl: "./item-detail.component.html",
    providers: [DatePipe]
})
export class ItemDetailComponent implements OnInit {
inputText;
constructor(){}
ngOnInit(): void{}

sendMessage(){
        if(this.text == undefined){
            console.log("Sie haben keine Nachricht eingetippt");
        }else{
            this.clearText();
            this._chatService.addMessage(this.id, this.text, this.me);
            
        }
    }

clearText(){
        if(this.inputText != ""){
            this.inputText = "";
        }else{
            console.log("Die nachricht ist schon leer")
        }
    }
}

When I send a Message the first Time the text gets cleared. But after that it still sends the Text but it doesnt delet the Message in the TextField.

First Click:

enter image description here

enter image description here

SecondClick:

enter image description here

It still sends the Message but it stays in the TextField box

Upvotes: 0

Views: 150

Answers (1)

William Juan
William Juan

Reputation: 1415

An alternate way to clear it which I find to consistently work is by setting the TextField's text property directly.

<TextField #TextField>
  ...

@ViewChild('TextField') textField: ElementRef;


clearText(): void {
  // keep this line as you are using it for sendMessage()
  this.inputText = "";

  // clear the textfield
  (<TextField>this.textField.nativeElement).text = "";
}

Upvotes: 1

Related Questions