how to check the text box is dirty or not

Question

Hi following is my html code

 <th style="width:90px">
 <span>ID</span><img class="serverRP_ajax-loader" src="loader_green_32.gif" /><input type="text"  id="abc" ng-model="rpFilter.ResourcePlanID.value" />                           
                    </th>

I want to enable loader_green_32.gif only when there is some value enter in abc textbox. $dirty is not possible because I am not using form tag

You have to use `form` API, it would make your life easier, why you don't want to use it? — Pankaj Parkar, Apr 11 '18 at 09:37

Sravan · Answer 1 · 2018-04-11T09:56:43.227

1

You can add ng-if="rpFilter.ResourcePlanID.value" to the image tag.

This will make that image visible only if you enter the value in textbox.

<th style="width:90px">
 <span>ID</span>
 <img ng-if="rpFilter.ResourcePlanID.value" class="serverRP_ajax-loader" src="loader_green_32.gif" />
 <input type="text"  id="abc" ng-model="rpFilter.ResourcePlanID.value" />
</th>

Here is a working EXAMPLE

Note: If you want to just check whether field is modified or not, then you need to use $dirty and for that you have to definitely take formtag

Here is how it goes,

You should use name of attribute,

ng-if="myForm.resourceplanid.$dirty"

<form name="myForm">
    <th style="width:90px">
    <span>ID</span>
    <img ng-if="myForm.resourceplanid.$dirty" class="serverRP_ajax-loader" src="loader_green_32.gif" />
    <input type="text" name="resourceplanid" id="abc" ng-model="rpFilter.ResourcePlanID.value" />
    </th>
</form>

edited Apr 11 '18 at 09:56

answered Apr 11 '18 at 09:37

Sravan

18,467
3
30
54

As OP said hide the loader only when input checkbox becomes `dirty`, so in this case `ng-if="rpFilter.ResourcePlanID.value"` will add/remove even though value pre-populated in entity edit case.. Hope you got what I meant to say. field `$dirty` has entirely different meaning – Pankaj Parkar Apr 11 '18 at 09:45
Watch his description below his code, don't judge only by title. I was about to say him to change the title. – Sravan Apr 11 '18 at 09:46
@Ritesh Gore, if you want to show the image when something is there in textbox, please change the title to something like. **display an image based on textbox value** – Sravan Apr 11 '18 at 09:48
@PankajParkar : Thanks – Ritesh Gore Apr 11 '18 at 09:52
@Sravan removed my downvote, I was focusing on `$dirty` part, as he explicitly mentioned it in question – Pankaj Parkar Apr 11 '18 at 09:52
@Pankaj Parkar, yeah fine, top avoid any further confusions, I also added the code for checking `$dirty` using the form and updated my answer. :) – Sravan Apr 11 '18 at 09:58

score 1 · Answer 2 · answered Apr 11 '18 at 09:37

<input ng-model="somefield">
<span ng-show="!somefield.length">Please enter something!</span>
<span ng-show="somefield.length">Good boy!</span>
You could also use ng-hide="somefield.length" instead of ng-show="!somefield.length" if that reads more naturally for you.

A better alternative might be to really take advantage of the form abilities of Angular:

<form name="myform">
  <input name="myfield" ng-model="somefield" ng-minlength="5" required>
  <span ng-show="myform.myfield.$error.required">Please enter something!</span>
  <span ng-show="!myform.myfield.$error.required">Good boy!</span>
</form>

how to check the text box is dirty or not

2 Answers2