Angular2:getting event.target.value

Question

I want to get event.target.value by the codes below.

    <input 
      mdInput 
      #owner
      required 
      placeholder="荷主" 
      [formControl]="detail.ownerTx" 
      [mdAutocomplete]="autoTxt" 
      (change)="detail.changeOwner(owner.value)"
     >

   class Detail {
    changeOwner(val: string){
     console.log(val);
    }
   }

but the answer of the console.log(val) is nothing.... any idea to actually do the data-binding??

Answer 1

I think you should use (keyup) or another keyboard event handler if you want to get this value using (keyup)="changeInput($event)" then you can access you DOM event and value ;)

Answer 2

(input)="detail.changeOwner($event.target.value)"

or

ngModel (ngModelChange)="detail.changOwner($event)"

You can also subscribe to valueChanges on the form control (detail.ownerTx) See also https://angular.io/api/forms/AbstractControl#valueChanges

Answer 3

change the input line to this

<input 
      mdInput 
      #owner
      required 
      placeholder="荷主" 
      [formControl]="detail.ownerTx" 
      [mdAutocomplete]="autoTxt" 
      (change)="detail.changeOwner($event)">

and function to this :

class Detail {
    changeOwner($event){
     //You will get the target with bunch of other options as well.  
     console.log($event.target.value);
    }
   }