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

admin管理员组

文章数量:1245128

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.

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.

• javascript
• angularjs

Share Improve this question Follow edited Sep 16, 2013 at 14:10 rodrigo.botti asked Sep 16, 2013 at 14:05 rodrigo.bottirodrigo.botti 28811 gold badge44 silver badges99 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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/TheSharpieOne/6M5JX/1/

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

本文标签：