CODEWITHSUNDEEP
jqueryangularjsionic-framework
KatherineMichelle
KatherineMichelle

Reputation: 453

Changing jQuery to ionic

So I originally had this bit of jQuery code, working perfectly fine: 

<input type="text" value="name-var"/>

$("input").keydown(function(e) {
    var oldvalue=$(this).val();
    var field=this;
    setTimeout(function () {
        if(field.value.indexOf('name-var') !== 0) {
            $(field).val(oldvalue);
        } 
    }, 1);
});

I have been tasked with making this code in ionic angular, and since I am extremely, extremely new at this, I'm having some trouble. This is what I have so far: 

 @Page({
      template: `
        <ion-content>
           <input 
              #orderCommentInput 
              (ngModelChange)="check()" 
              type="text" 
              [(ngModel)]="comment"
            />
         </ion-content>
      `  
    })

  class Page1 {
      @ViewChild('orderCommentInput') orderCommentInput;
      name = "123sdfgfhd4";
      comment = '' + this.name
      check() {
        orderCommentInput.addEventListener("keydown"(function(e){
          var oldvalue = this.name.val();
          var field=this;
          setTimeout(function(){
            if(field.value.indexOf('name') ! == 0) {
              field.val(oldvalue)
            }
          }, 1)
        })

        console.log(this.comment, this.orderCommentInput)
      }

Would anyone be able to explain what I am doing wrong in moving this from jQuery to ionic? Again I am sorry if this seems simple or I'm doing something stupid, I am very new and just asking for a bit of explanation.

Upvotes: 0

Views: 41

Answers (1)

ChesterLaborde
ChesterLaborde

Reputation: 458

Insted of using <input> use <ion-input (keydown)='change()'>. I'm guessing you are trying to change some other input value, so what i'd do is set a [(ngModel)] on that input and then modify it's value in the change method like so:

class Page1 {
  @ViewChild('orderCommentInput') orderCommentInput;
  changedValue: String = '';
  name = "123sdfgfhd4";
  comment = '' + this.name
  check() {
      setTimeout(function(){
        //I don't know what you need the timer for
        this.changedValue = this.name
      }, 1)

    console.log(this.comment, this.changedValue)
  }

  @Page({
  template: `
    <ion-content>
       <ion-input 
          #orderCommentInput 
          (keydown)="check()" 
          type="text" 
          [(ngModel)]="comment"
        />
        <ion-input  
          type="text" 
          [(ngModel)]="changedValue"
        />

     </ion-content>
  `  
})

Upvotes: 1

Related Questions