AngularJS ng-class adding class but not removing it on change

Question

I have a text input within an ng-repeat. When I click on the input I'm attaching a date picker and triggering a change() on the input when the date is selected.

$(this).val(picker.startDate.format(datePickerOutputFormat)).change();

This works and AngularJS scope picks up the change. I have a span on the page that is bound to the date value so I can see this changing.

On the input, I want to highlight null dates using ng-class with the following.

<input type="text"
  class="form-control single-date-input"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date"
  ng-class="{ 'invalid-input' : null == demoInRepeat.date }">

This works fine, until I manual edit the input value and delete the date. If I pick the date off the date picker again the invalid-input class remains even though the value update on both the input and on the span I'm using to show the scope is changing.

Even if I display the evaluated value of the ng-class condition, this shows true/false as expected.

{{ null == demoInRepeat.date }}

I would expect the invalid-input class to be removed once the date is re-selected. Any ideas?

Using AngularJS v1.5.8

Please read: https://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background and finally kick jQuery. =) — lin, Jun 26 '17 at 08:05

score 1 · Answer 1 · answered Jun 26 '17 at 09:17

1

I think this solution helps to remove invalid-input class once the date is re-selected. create one more class called valid-input and add CSS for that and you will be done.

<input type="text"
  class="form-control single-date-input"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date"
  ng-class="{ 'invalid-input' : null == demoInRepeat.date , 'valid-input' : null != demoInRepeat.date }">

answered Jun 26 '17 at 09:17

Dixit

1,359
3
18
39

@user1107685 I will appreciate if you got the solution, Yes If you want to apply CSS on some condition then this solution is better. – Dixit Jun 26 '17 at 10:07
sorry I thought that worked but it was actually getting stuck on valid-input and no longer showing invalid-input when I made the input invalid again. – user1107685 Jun 26 '17 at 10:09
can you please create plunker for this, I will help you better. – Dixit Jun 26 '17 at 10:10

score 1 · Answer 2 · answered Jun 26 '17 at 11:32

I got this working with a workaround that doesn't use ng-class.

I changed this...

<input type="text"
  class="form-control single-date-input"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date"
  ng-class="{ 'invalid-input' : null == demoInRepeat.date }">

to this

<input type="text"
  class="form-control single-date-input {{ null == demoInRepeat.date ? 'invalid-input' : '' }}"
  placeholder="dd/mm/yyyy"
  ng-model="demoInRepeat.date">

I still don't see why the original approach did not work though.

AngularJS ng-class adding class but not removing it on change

2 Answers2