Ngif for empty string validation angular 5

Question

I'm struggling to validate an empty string retrieved from a server

It's usually pretty straight forward it's just not working

<div class="ui-g-2 info-txt"
     *ngIf="appointment.Notes !==null || 
     appointment.Notes !== ''">
     <i class="fa fa-commenting-o" aria-hidden="true"</i>
</div>

<div class="ui-g-5 info-txt"
     *ngIf="appointment.Notes !==null ||     
     appointment.Notes !== ''">
     *emphasized text*{{appointment.Notes}}
</div>

<div class="ui-g-7 info-txt"
     *ngIf="appointment.Notes === null || 
     appointment.Notes === ''"
     style="padding-top: 0;">
     no hay notas disponibles
</div>

So I'm checking for a null or string with nothing in it, the problem is its still showing the icon and the empty string

When there is a message inside the no hay..... doesnt show so its working perfectly on that side

Any help greatly appreciated been stuck on this for ages.

Im sure its a obvious I just cant see it

Any chance it's undefined? You can try *ngIf="appointment.Notes" which will only be true if Notes is not null, undefined, empty string etc — user184994
– user184994, Commented Nov 1, 2018 at 19:17
I suggest that you move that logic into a function so that it can be shared and you can also make it more robust without cluttering up the HTML. Like the above user said you can also check for undefined whitespaces ' ' etc — The Muffin Man
– The Muffin Man, Commented Nov 1, 2018 at 19:18

nircraft · Accepted Answer · 2021-03-14 04:00:46Z

7

You can have double negation to check if value is not undefined/null or Empty. Ex: *ngIf="!!name".

This will prevent all Null, undefined or empty values from showing up.

edited Mar 14, 2021 at 4:00

answered Nov 1, 2018 at 20:53

nircraft

8,5085 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

nircraft · Accepted Answer · 2020-10-21 18:13:43Z

1

Shouldn't it be:

appointment.Notes !==null && appointment.Notes !== ''"

You want it to be not null AND not empty, but you're just checking if it's either not null OR not empty, one or the other. Which means, if you have this value:

const name = "";

The *ngIf condition will be true because it is not null.

edited Oct 21, 2020 at 18:13

nircraft

8,5085 gold badges33 silver badges46 bronze badges

answered Nov 1, 2018 at 19:20

David Anthony Acosta

4,9381 gold badge21 silver badges21 bronze badges

2 Comments

AWGAL Over a year ago

Legend dude :D . I knew it was something obvious. Thanks alot will accept when the four mins pass

Minu Over a year ago

You can also try *ngIf(appointment.Notes) which inturn checks both the conditions if I am not wrong

Collectives™ on Stack Overflow

Ngif for empty string validation angular 5

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related