Angular.js: add $hasFocus or $focused to forms

Created on 25 Apr 2012  路  25Comments  路  Source: angular/angular.js

just like we have $pristine and $dirty it would be great if we also allowed binding to $focus and $notFocused.

not core feature

Most helpful comment

+1 This is definitely needed. Consider the situation:

<div class="input-group">
        <input ng-model="formname.fieldname.val" name="fieldname" />

        <span class="input-group-addon">
              <i class="glyphicon glyphicon-time"></i>
        </span>
 </div>

I can do:

input:focus + .input-group-addon .glyphicon { color: $focusColor; }

But I cannot do this if I want the icon-group-addon before the input. $focus flag on form models would solve this.

<div class="input-group">
       <span class="input-group-addon">
              <i class="glyphicon glyphicon-time" 
                 ng-class="{ 'focus': formname.fieldname.$focus }"></i>
        </span>
        <input ng-model="formname.fieldname.val" name="fieldname" />        
 </div>

All 25 comments

+1

+1 :+1: Already implemented in my app :)

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

Unless I'm reading the docs wrong, this is still an issue.

You can just use ngFocus: http://docs.angularjs.org/api/ng.directive:ngFocus

Not sure you _really_ need this.

Yes we do.
Otherwise why would we need $dirty or $valid? We could handle those by some custom directives. But this is not what angular is about.
So I think form.$focused is definitively needed.

+1

+1

+1 This is definitely needed. Consider the situation:

<div class="input-group">
        <input ng-model="formname.fieldname.val" name="fieldname" />

        <span class="input-group-addon">
              <i class="glyphicon glyphicon-time"></i>
        </span>
 </div>

I can do:

input:focus + .input-group-addon .glyphicon { color: $focusColor; }

But I cannot do this if I want the icon-group-addon before the input. $focus flag on form models would solve this.

<div class="input-group">
       <span class="input-group-addon">
              <i class="glyphicon glyphicon-time" 
                 ng-class="{ 'focus': formname.fieldname.$focus }"></i>
        </span>
        <input ng-model="formname.fieldname.val" name="fieldname" />        
 </div>

+1

+1

+1

+1

Consider situation where error "This field does not pass validation" is shown even when input is focus. User would be annoyed seeing the error message as he's intending to enter the right text.

@poonwu, this is what .ng-touched/ng-untouched are for (although not exactly the same as focus).
A focus specific class might indeed be needed in some applications, but we don't want to clutter the core with stuff that may be unused by most. Especially since this is trivial to implement outside of core.

+1
I agree that it would still be useful. Similar to what @poonwu mentions - Many use cases exist where one may want to show validation-specific messages or styles for fields once $touched is true, but _only_ if the field does not have focus. $focused would certainly help.

+1

+1 - this flag can definitely come useful in many cases.

+1

+1

@btford Any idea on this one? Or is it gone for good? It seems you've had people chiming in on this for almost 5 years now.

Cheers

As explained in https://github.com/angular/angular.js/issues/903#issuecomment-199791506, I still believe this is not something that belongs in core. It is not as often needed and is pretty easy to implement as a standalone directive (and even distribute as a 3rd-party module). Especially since Angular (2+) doesn't support it either afaik, I would be very hesitant about adding it to AngularJS (1.x).

+1

+1

+1

+1
Damn, they don't undserstand.

Was this page helpful?
0 / 5 - 0 ratings