Azrael
Azrael

Reputation: 21

Angular 10 PrimeNG ngClass

I'm currently stuck with an issue on the Ternary operator, so I have this code:

[ngClass]="am.hasAssignmentRequiredData(bal) && am.isDirty(bal) ? '':'disable'"

so what this does is if the date time picker is not less than year 2000, a notepad will be enabled then you can add details, and continue to save.

but what happens is if you choose a date later than 2000, add comment, then return the date to less than 2000, you can still continue to save because the 'disable' is not working anymore, like it only triggers once.

does anyone know how I can mitigate this?

I tried

[ngClass]="am.hasAssignmentRequiredData(bal) && am.isDirty(bal) && isDateValid ? '':'disable'"

but it does the reverse, I cannot save when the date is greater than 2000.

Upvotes: 1

Views: 601

Answers (1)

you need to invert the order and make it an object makes it a bit more clear too

[ngClass]="{
   disable : am.hasAssignmentRequiredData(bal) && am.isDirty(bal)
}"

you dont need the quotation mark of the css class unless you need something like dashes in the css class. Like:

[ngClass]="{
   'some-class' : someVal == anotherVal,
    disable: am.hasAssignmentRequiredData(bal) && am.isDirty(bal)
}"

Upvotes: 0

Related Questions