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>
Related
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 the following code in an input text box with the required attribute, but when I tab off of the field or submit the form, it doesn't stop the form from submitting and informing the user the field is required.
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control"
placeholder="Enter Total Amount" id="txtTotalAmount"
ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
</div>
What do I need to do to make the required directive to work?
For that you should fire ng-submit event when form is valid
ng-submit="myForm.$valid && submit()"
Seems like you have also missed the name attribute on your input field, also for showing an error you could use ng-show/ng-messages directive
<form name="myForm" ng-submit="myForm.$valid && submit()">
<div class="col-sm-8">
<input type="text" ng-required="true" class="form-control" placeholder="Enter Total Amount" name="txtTotalAmount"
id="txtTotalAmount" ng-model="formCtrl.AddCheckDeposit.TotalAmount" />
<span ng-show="myForm.txtTotalAmount.$error.required">Required</span>
</div>
</form>
I am making a simple html page with validation by angularjs..
I have taken the html file with angularjs by this process
<title>Student Registration Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
while I am giving the validation in this way
<body ng-app>
and then I am giving the validation in the text area like this code
<input type="text" name="First_Name" maxlength="30" ng-pattern="/^[a-zA-Z\s]*$/"/>
this ng pattern refers that only alphabets and blank space could be entered
but the error is the validation is not happening.
There is no validation because input field has no model bound, so no data to validate. Add ngModel directive and it should work:
<input type="text" name="First_Name" ng-model="user.firstName" maxlength="30" ng-pattern="/^[a-zA-Z\s]*$/" />
You can output the validation state by reading .$valid of the field
<body ng-app >
<div >
<form name="myForm">
<label>
User name:
<input type="text" name="userName" ng-model="userName" ng-pattern="/^[a-zA-Z\s]*$/" >
</label>
<div>
user: {{userName}}
</div>
</form>
<hr>
<tt>myForm.userName.$valid = {{myForm.userName.$valid}}</tt><br/>
</div>
</body>
http://plnkr.co/edit/lml1eBqEkvCBpz2kb51Z?p=preview
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}}
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 { ... }