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??
(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
console.log("val:" + val) in class Detail anwsered val:. nothing is in it.mdAutocomplete.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 ;)
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);
}
}
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!
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;
}
}
