How to clear an input field in ionic v3 using typescript

Question

So, I have an inout field, and I want to clear the text field when I click on Send, I'm not sure how to do that in typescript for ionic.

This is my code:

 <ion-footer>
    <ion-item>
        <ion-input id="testId" type="text" placeholder="Type your Message here..." [(ngModel)]="newmessage"></ion-input>
        <button ion-button clear item-right (click)="send()">Send</button>
    </ion-item>
</ion-footer>

This is my Ts file

 send(){

    this.ref.push({
        //key:this.ref.push().key("hello"),
        name: this.name,
        message: this.newmessage,
        phNo: this.data3,


    });

Eric Ong · Accepted Answer · 2017-10-02 12:54:02Z

2

Hi, does this helps?

send(){
    this.ref.push({
        //key:this.ref.push().key("hello"),
        name: this.name,
        message: this.newmessage,
        phNo: this.data3,
    });
    this.newmessage = ""; //clear this.newmessage
    }

answered Oct 2, 2017 at 12:54

Eric Ong

1101 gold badge1 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aros Over a year ago

Exactly, how do you do this for number field? I can set the linked variable to zero but what if I don't want the zero to be displayed? What if I just want to clear the input field to the initial (empty) state? I mean when running in browser you can also assign the number to '' but that won't work when you try to compile the typescript for Android...

user3955928 · Accepted Answer · 2017-09-27 05:26:00Z

0

check this

 <ion-view title="Standard">
  <ion-content class="has-header" ng-controller="calcCtrl">
    <form id="calcForm" name="calcForm" ng-submit="submitData(calculate)">
      <label class="item-input">
        <span class="input-label">Price</span>
        <input class="input-label" type="text" placeholder="$0.00" ng-model="calculate.price">
      </label>

      <label class="item-input ">
        <span class="input-label">Discount</span>
        <input class="input-label" type="text" placeholder="$0.00" ng-model="calculate.discount">
      </label>
    </form>
  </ion-content>

  <ion-footer-bar class="bar-stable">
    <div class="buttons pull-right">
      <button class="button button-positive" ng-click="resetForm()">Clear</a>
    </div>
  </ion-footer-bar>
</ion-view>






  $scope.clearFields = function() {
$scope.calculate = angular.copy(calcForm);
$scope.calcForm.$setPristine();
}

Check this

answered Sep 27, 2017 at 5:26

user3955928

1 Comment

user8030578 Over a year ago

working on angular 4 with typescript,so this doesn't help,thanks anyway :)

Collectives™ on Stack Overflow

How to clear an input field in ionic v3 using typescript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related