i have a form like this and i like to user angularjs for form validation
<form name="userrequest">
<div id="userdetails">
<input type="text" id="buyerName" />
</div>
<div id="buyerDetails">
<input type="text" id="buyerName" />
<input type="text" id="buyercity" />
</div>
</form
how can i check any input elements inside buyerDetails div is in dirty state?
You should use ng-model on each form field with name attribute, that will enable the dirty checking on form elements. You could check any form field dirty or not by using its name
Markup
<form name="userrequest">
<div id="userdetails">
<input type="text" id="buyerName" name="userBuyerName"
ng-model="form.user.buyerName" />
</div>
Dirty
<br/> form.user.buyerName {{userrequest.userBuyerName.$dirty}}
<div id="buyerDetails">
<input type="text" id="buyerName" name="buyerName"
ng-model="form.buyer.buyerName" />
<input type="text" id="buyercity" name="buyerName"
ng-model="form.buyer.buyerName" />
</div>
Dirty
<br/> form.buyer.buyerName {{userrequest.buyerName.$dirty}}
<br/> form.buyer.buyercity {{userrequest.buyercity.$dirty}}
</form>
Is form is Dirty {{userrequest.$dirty}}
Related
Here is a plunker link of my code where it's shown that autofocus doesn't work
http://jsfiddle.net/05hq7shr/118/
<div ng-form="exampleForm" class="form-horizontal">
<input type="text" autofocus type="text" aa-field-group="myName" required />
<div class="form-group">
<div class="col-sm-offset-2 col-sm-3">
<button aa-submit-form="save()" class="btn btn-default">Save</button>
</div>
</div>
</div>
using javascript you can focus the input on page load.
window.onload = function() {
document.getElementById("autoInput").focus();
};
<input type="text" id="autoInput" type="text" aa-field-group="myName" required />
demo
Strange , Don't know the reason but by removing
aa-field-group="myName"
from the input filed focus will work
can we have two forms with the same form name on the same page ?
will angular validation work properly for each form ?
For example
<form name="ajax">
<input type="text" name="fname" />
</form>
<form name="ajax">
<input type="text" name="fname" />
</form>
As per my understanding angular validation is not working properly with same form name in same page.
Angular will only consider the last form name
Ex:
<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>
<form name="myForm">
<input type="email" name="myInpu" ng-model="myInpu">
</form>
<p>The input's valid state is:</p>
<h1>Form 1 : {{myForm.myInput.$valid}}</h1>
<h1>Form 2 : {{myForm.myInpu.$valid}}</h1>
I'm creating a form on AngularJS, I'm using required attribute on username,
it's not working on submitting the form.
<div ng-app="myOwnModule" ng-controller="myOwnCon">
<form name="myOwnForm" novalidate >
<input type="text" name="moname" id="moname" ng-model="myOwnForm.moname" required />
<div ng-messages="myOwnForm.moname.$error" ng-if="myOwnForm.moname.$touched">
<p ng-message="myOwnForm.moname.$error.required">Required</p>
</div>
<input type="submit" name="mosave" id="mosave" ng-click="send($event)" value="Send" />
</form>
</div>
My module
var myOwnModule = angular.module('myOwnModule', ['ngMessages']);
You have conflict with you data model which you have used for binding and the form name. Because as I can see you are myOwnForm for data & myOwnForm for form name. You should change your data model to use some different name like model
And other than that don't use ng-show.
<form name="myOwnForm" novalidate >
<input type="text" name="moname" id="moname" ng-model="model.test" required />
<div ng-messages="myOwnForm.moname.$error" ng-show="myOwnForm.moname.$touched">
<p ng-message="required">Required</p>
</div>
<input type="submit" name="mosave" id="mosave" ng-click="send($event)" value="Send" />
</form>
Plunkr
I have custom html5 error message for input, which changes validation error text in chrome.
<input
oninvalid="setCustomValidity('It's custom message!')"
onchange="try{setCustomValidity('')}catch(e){}">
How can I do this with Angular directive?
Updated
Let's say, I want type <input custom-validity> instead of this.
You can learn all about doing form validation the Angular way in their documentation.
You don't need to create your own directives, because angular already has great form validation support built in.
Below is an example how to use the $dirty and $invalid attributes to show or hide validation messages. 'dirty' means that the form has been modified by the user.
<div ng-app="app">
<form name="myForm" novalidate>
<p>
<label>Name
<input type="text" name="name" ng-model="name" required>
<span ng-show="myForm.name.$invalid && myForm.name.$dirty">
Name required
</span>
</label>
</p>
<p>
<label>Email
<input type="email" name="email" ng-model="email">
<span ng-show="myForm.email.$invalid && myForm.email.$dirty">
Put a valid email
</span>
</label>
</p>
<input type="submit" value="Submit" ng-disabled="myForm.$invalid">
</form>
</div>
You can also style the valid/invalid fields using a style rule like this:
form input.ng-invalid.ng-dirty { ... }
I have a $rootScope variable:
$rootScope.register_data = {};
I have a view which contains a form:
<form name="register_data">
<div class="popup signup">
<div class="social">
<a ng-controller="FacebookCtrl" ng-click="login()" href="javascript:void(0)" class="facebook fb-login-button">Sign up with Facebook</a>
<div class="clear"></div>
</div>
<div class="userinfo">
<div class="left"><input type="text" ng-model="register_data.firstname" placeholder="First Name" tabindex="1" required></div>
<div class="right"><input type="text" ng-model="register_data.email" placeholder="Email Address" tabindex="4" required></div>
<div class="left"><input type="text" ng-model="register_data.lastname" placeholder="Last Name" tabindex="2" required></div>
<div class="right optional"><div class="tip">optional</div><input type="text" ng-model="register_data.dob" tabindex="5" placeholder="DoB (dd/mm/yyyy)"></div>
<div class="left"><input type="text" ng-model="register_data.phone" placeholder="Phone Number" tabindex="3" required></div>
<div class="right password"> <input type="password" ng-model="register_data.password" placeholder="Password" tabindex="6" required></div>
<div class="clear"></div>
</div>
<div class="control">
<span class="terms">I agree to the terms & conditions</span>
Sign up
</div>
</div>
</form>
The form has a name register_data and each field is bound to that via ng-model. It seems to overwrite my $rootScope.register_data variable as when I update that none of the form controls update. Though if I remove the form name then it works. However i need the form name to do proper form validation.
Anyone know how I can bind the form controls to a scope object but also keep the form validation?
Change the form name to be something else other than the name used as model, since the form controller will be published into related scope, under this name.