javascript - how can i use Angular focusout with if condition

Question

This is my input field

<input 
(keyup.enter)="save()" 
(focusout)="save()" 
class="editinput custom_story_input" 
type="text" 
placeholder="Create a new one"
id="tbtfeild"
value="" [(ngModel)]="childTaskmodel.childtitle"
#childtitle="ngModel"
name="childtitle" />

From the above input field, I don't have any problem with enter if the field is empty it shows the error message

Coming to focus out it should only work if there is any data present in the input field how can i do this..?

i want something like this:

  <input *ngIf (focusout)="childtitle.val != '' ? save() : '' " >

Answer 1

Welll you can do that :

<input [(ngModel)]="childtitle" (focusout)="childtitle ? save() : null">

test it : unless your input has a value, it won't work.

EDIT Explanation :

you first bind your variable to the input with [(ngModel)]="childtitle" : this allows you to let angular know that he has to watch for changes on that variable.

Next, you bind an HTML event to this input, with (focusout)="childtitle ? save() : null". As a value, you write a ternary operator : this is a one-liner for a if ... else ... condition. In that ternary, you state that if this input has a value (this is a truthy value, a Javascript concept, you will find more on the internet), then you can run the function. If not, then you just run null, which ... Does nothing.

Answer 2

Inside your save() function, check your model childTaskmodel.childtitle. If it's empty, don't continue. If you want different behaviour for your keyup.enter and focusout, just create two methods inside controller.