We Keep Coding

angularJs check if input is entered

I am new to angular Js and developing a form where the input box will minimize when input is being entered. i am using ng-blur,ng-click and ng-focus and calling the function which will change the css classes for this purpose.
But the issue is when id/password is saved, the css class is not changed as their is no click,focus,blur on the form.
Below is the code snippet
<input class="field" name="id" ng-model="form.id"
ng-click="onClickFunction()" ng-focus="onFocusFunction()"
ng-blur="onBlurFunction(fieldValue)" type="text" required>
How can the id/password that is saved be recognized?
Thanks in advance.

I think you can use something like below assuming loginform as the form name and username as your name for userID field
<input id="login_username" class="form-control" type="text" ng-minlength="5"
name="userName" placeholder="Username" ng-model="userName" required
autofocus>
<div style="color: red" ng-messages="loginForm.userName.$error" ng-if="loginForm.userName.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="minlength">Username should be over 5 characters</div>
</div>

How to add input field validation for url using Angular.js/Javascript

i need one help.I need to validate the input field for URL.I am explaining my code below.
<div class="input-group bmargindiv1 col-md-12">
<span class="input-group-addon ndrftextwidth text-right oditek-form" style="width:180px" id="identitylabel">Website URL:</span>
<input type="text" name="url" id="weburl" class="form-control oditek-form" placeholder="Add Website URL" ng-model="url" ng-keypress="clearField('weburl');">
</div>
Here right now i can entry any URL of any format.suppose user is entering one URL like www.angon.com then it should throw the validation error to add http/https in beginning of the URL.Please help me.

You could simply use add type="url" to your input field, so that would verify value of input field and by verify its valid URL or not it will add ng-invalid class over input field.
Markup
<input type="url" name="url" id="weburl"
class="form-control oditek-form" placeholder="Add Website URL"
ng-model="url" ng-keypress="clearField('weburl');"/>
Refer Examples :- https://docs.angularjs.org/api/ng/input/input%5Burl%5D
ng-pattern "- https://docs.angularjs.org/api/ng/directive/ngPattern

$dirty with ng-model-options = { updateOn : 'blur' }

<form name="angForm" novalidate>
<div class="form-group">
<label for="name1" class="sr-only">Last Name</label>
<span ng-show="angForm.name1.$dirty">* Will be updated to model
only after this text box is blurred.
</span>
<input type="text" name="name1" id="name1" class="form-control" ng-model="person.lastName"
ng-model-options="{updateOn : 'blur'}" ng-disabled="!edit"
placeholder="Last Name" />
</div>
</form>
The above code just have a text box with a span message, which I expect to appear once the user interacts (i.e., types) with the text box, but the model must be updated with the view value only when the user leaves the text box.
But, the span message is not displaying as soon as the interaction happens, it gets displayed only when the user leaves the text box.
Can anyone please explain me this behaviour?

Angular JS get error to show after user highlights input field and doesnt enter anything

I have some Angular JS validation working on my wizard steps app and errors appear when the user enters a character in the input field and removes it. I am wondering how do I get the error to show after the user is on the input field and does not enter anything? (They tab onto the field and tab off without entering anything) I hope this makes sense....
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && !user.validate.step1.name.$pristine">Required Field
</span>

Use ng-blur:
<td>
<label>Your Name</label>
</td>
<td>
<input class="form-control" type="text" name="name" ng-model="user.name" ng-blur="blur=true" required />
<span class="error" ng-show="user.validate.step1.name.$invalid && blur">Required Field
</span>

The easiest/best way would probably by marking the control as dirty by using ng-blur:
<input class="form-control" type="text" name="name" ng-model="user.name" required ng-blur="user.validate.step1.name.$dirty = true"/>
The next 1.3 beta version(beta 12) will have a $touched you can use to check for it, but none of the current versions have that yet.

how to test angularjs app with angularjs e2e with multiple inputs with same ng-model

in our program we have a directive that occurs multiple times with an input field. Our code looks something like this
<li>
<label>AMI</label>
<div class="searchbox" searchbox="" filter="search.ami">
<form ng-submit="doFilter()" class="ng-pristine ng-valid">
<input class="span12 ng-pristine ng-valid" type="text" placeholder="" ng-model="filter">
</form>
</div>
</li>
<li>
<label>Username</label>
<div class="searchbox" searchbox="" filter="search.username">
<form ng-submit="doFilter()" class="ng-pristine ng-valid">
<input class="span12 ng-pristine ng-valid" type="text" placeholder="" ng-model="filter">
</form>
</div>
</li>
now using the angular e2e test it says use the "input(name).enter(value)" to input, where the name is the ng-model. If i do this and say "input('filter').enter('foo')" both input fields will get inputted. I can't figure out how to just input one field at a time. How would you do so.

I figured it out. i need to use using to focus the scope. example
using('div[filter="search.username"]').input("filter").enter("foo");
using('div[filter="search.ami"]').input("filter").enter("bar")