CODEWITHSUNDEEP
angulartypescript
TikChiku
TikChiku

Reputation: 403

Angular2:getting event.target.value

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??

Upvotes: 8

Views: 75147

Answers (5)

A. Zalonis
A. Zalonis

Reputation: 1609

What I did and worked for me (with angular 15) is like bellow:

In HTML File

<input matInput type="text" (keyup)="doFilter($event)" placeholder="filter">

Inside the component:

doFilter(filterValue?: Event) { 
      console.log("Filter: ", (filterValue?.target as HTMLInputElement).value);
      if((filterValue?.target as HTMLInputElement).value != null) {
        this.dataSource.filter = (filterValue?.target as HTMLInputElement).value.trim().toLowerCase();
      }
    }

I hope it will help someone :)

Happy coding!

Upvotes: 1

Thirdman
Thirdman

Reputation: 709

Use a component method to implement the cast, it is not possible to cast in templates!

@Component({
  selector: '...',
  template: '<input (keyup)="filter(target($event).value)">',
})
export class SomeCmp {
  target(event: KeyboardEvent): HTMLInputElement {
    if (!(event.target instanceof HTMLInputElement)) {
      throw new Error("wrong target");
    }
    return event.target;
  }
}

Also see https://github.com/angular/angular/issues/35293

Upvotes: 0

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657416

(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

Upvotes: 5

andrea06590
andrea06590

Reputation: 1299

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 ;)

Upvotes: 4

Fahad Nisar
Fahad Nisar

Reputation: 1733

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);
    }
   }

Upvotes: 1

Related Questions