使用（焦点）检索输入的值

Question

My Input looks like that :

<mat-form-field>
  <input 
    matInput 
    placeholder="A blablabla" 
    required 
    (focus)="focusIn($event)" 
    (focusout)="focusOut($event)" 
    [(ngModel)]="A.txt1" 
    (ngModelChange)="onChange()"
    (keypress)="numberOnlyMin($event)">
</mat-form-field>

My methods are :

focusIn(event: FocusEvent) {
  console.log(event.detail);
}

focusOut(event: FocusEvent) {
  console.log(event.detail);
}

Basically I want to retrieve the value of my input right after I finish writing, that is why I use focusOut .

However I retrieve 0 all the time, is there any reason why ?

And how to pass data between those 2 focus?

Thanks !

Answer 1

Judging from the post, I believe your main intent is to actually know when the user has finished changing something in the input field and then use the value.

You could use the (change) event in order to know when something has changed in the field.

This will fire only once you've focused out of the input and there's a change in the input value. So you don't really have to listen to all those other events.

If you still want to be notified even if there's no change in the value of the input, using the (blur) event would be ideal.

---

Here's a Working Sample StackBlitz for your ref.

Answer 2

You are looking for the blur-method.

Usage in Component:

  onBlur($event) {
    console.log($event.target.value);
  }

Usage in Markup

<input type="text" (blur)="onBlur($event)" >