AngularJS: ng-if checking model value, but model value of input set only if input is $valid

Question

Here's what I'd like to do:

I have a form with two inputs one is type "email" and the other is type "password".
There's an object called form in the $scope
Both inputs have ng-model directive (ng-model="form.input_name")
I wanna make an icon appear next to the input only if something's typed in the input
That icon has an action attached to clear the input (using angularjs hammer's directive 'ng-tap').
To check if the input is set and make the icon appear I use ng-if="form.input_name.length>0".
The thing is, the model value of the input is only set if the input is $valid, so for my email input the icon only appears if what's typed on the input has a valid email format ([email protected]).

Is there a way to check the view value of the input on the ng-if or is there a better solution for making the icon appear?

Here's the code i'm using(with css classes omitted):

-HTML:

<form name="form-login">
  <input placeholder="email" type="email" ng-model="form.email" required>
  <i hm-tap="clearContent('email')",ng-if="form.email.length>0">

  <input placeholder="password" type="email" ng-model="form.passwd" required>
  <i hm-tap="clearContent('passwd')",ng-if="form.passwd.length>0">
</form>

-function to clear input in coffeescript

$scope.clearContent = (fieldName) ->
      switch fieldName
        when 'passwd' then $scope.form.passwd = ""
        when 'email' then $scope.form.email = ""

This works fine for the password input (since it has no validation). Thanks for reading.

Rishi0405 · Accepted Answer · 2017-09-01 11:54:15Z

10

Browser validation will keep the internal value of the input empty until it passes the validation. In this case, an email validation. This means that what the user see and what JS see is different!

You can check the form input's $viewValue and show if it has a length > 0. You will have to name your form (which you already had) and each input (which I added). Also you can access each value by FORMNAME.INPUTNAME.$viewValue.

<form name="formLogin">
    <input placeholder="email" type="email" name="email" ng-model="form.email" required /> <i hm-tap="form.email = ''" ng-if="formLogin.email.$viewValue.length>0">!</i>
    <input placeholder="password" type="password" name="passwd" ng-model="form.passwd" required /> <i hm-tap="form.passwd = ''" ng-if="formLogin.passwd.$viewValue.length>0">!</i>
</form>

Example: http://jsfiddle.net/TheSharpieOne/6M5JX/1/

Also, you can avoid the clearContent function by setting the field [to an empty string] directly in the hm-tap

edited Sep 1, 2017 at 11:54

Rishi0405

3541 silver badge13 bronze badges

answered Sep 16, 2013 at 14:37

TheSharpieOne

25.7k9 gold badges71 silver badges80 bronze badges

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

3 Comments

rodrigo.botti Over a year ago

Thanks, that worked! One thing to note though, if I used 'form-login' instead of 'formLogin' for the form name, the ng-if directive wouldn't work for some reason. I didn`t know it required naming conventions. Sorry for not voting +1 to your post btw. I just created my account so I don't have enough reputation to vote.

TheSharpieOne Over a year ago

Hyphens/dashes are not allowed in variable names, though they are allowed in keys where you can pass the key as a string. The form name is essentially a key in the $scope object so it is allowed, but parsing it with Angular in the template is another problem, it see its as subtracting login from form.

Ben Lesh Over a year ago

AH, I didn't think of using the $viewValue. Very good. retracting my answer.

Collectives™ on Stack Overflow

AngularJS: ng-if checking model value, but model value of input set only if input is $valid

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related