Question

37

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

rated 0 times [ 38] [ 1] / answers: 1 / hits: 34300 / 11 Years ago, mon, september 16, 2013, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

terrence

Add To Favorites

Follow

Total Points: 120

Total Questions: 115

Total Answers: 87

Location: England

Member since Fri, May 22, 2020

4 Years ago

terrence questions

1 Cannot read properties of undefined (reading 'toHexString') in ether.js

Sun, Mar 13, 22, 00:00, 2 Years ago

1 Javascript Remove Focus on Enter Key Press

Sat, Jun 5, 21, 00:00, 3 Years ago

1 Implementing Lodash's debounce in a ReactJS functional component

Mon, Aug 31, 20, 00:00, 4 Years ago

1 How to customize mat select option group to allow nested values in angular

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Read file component (fs.readFile)

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 11 Years ago beatrizrheaq · Accepted Answer

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