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
Related
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 have a form in my html page:
<div id=update>
<form class="form-inline" ng-submit="updateCompany(company.companyId,company.companyName,company.newPassword,company.newEmail)" ng-show="updateForm">
<h3>Update Company</h3>
<div class="form-group">
<input type="text"
class="form-control" id="companyId" value={{company.companyId}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyName"
value={{company.companyName}} readonly/>
</div>
<div class="form-group">
<input type="text"
class="form-control" id="companyPassword"
placeholder="Enter New Password" ng-model="company.newPassword"/>
</div>
<div class="form-group">
<input type="email"
class="form-control" id="companyEmail" placeholder="Enter New Email"
ng-model="company.newEmail" />
<button type="submit" class="btn btn-default">UPDATE</button>
</div>
</form>
</div>
I would like to show the current company values(id,name,password,email),
in the text fields, than give the user option to change the password and the email and send all the parameters when I submit the form.
The problem is when I put the ng-model on the text field, the current value disappears.
I need a fix for that!!!
In the first two fields I see the value now because I don't have the ng-model on them, once I put ng-model it disappear.
In your controller just attach the company data to scope like this:
$scope.company = yourcompanydata
And as for submitting the data, you don't have to list all the parameters in your html. In your html just leave:
ng-submit="updateCompany()"
And in your controller:
$scope.updateCompany = function(){
// your submitting logic here and all the company data will
// be available under $scope.company
// including the new password and email entered by the user
// so your submitting logic could look something like this:
submitCompanyData($scope.company.companyId, $scope.company.newPassword,...)
}
Here is a simple version codepen to get you started, depending what you'd like to do with data afterwords. I can update as needed.
angular
.module('app', [])
.controller('ExampleController', ExampleController);
function ExampleController() {
var vm = this;
vm.company = {};
vm.info = info;
function info(info) {
console.log(info);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app='app'>
<div class="container" ng-controller="ExampleController as vm">
<form novalidate>
<input type="text" ng-model="vm.company.name" required/>
<input type="email" ng-model="vm.company.email" required/>
<input type="submit" ng-click="vm.info(vm.company)" value="Submit" />
</form>
{{vm.company| json}}
</div>
</body>
I have a form with an error field. Code is as follows:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Is my logic of how ngMessages work correct? I tried setting "has_spaces" after the form is submitted but nothing works.
Your snippet is correct, except you need to access the form element for which you want to get errors by its name attribute and not the value of ng-model. I.e., instead of accessing myform.username.$error, you should access myform.text.$error. This snippet should do the job:
<form name="myform" ng-submit="submit">
<input name="text" ng-model="username" required>
<div ng-messages="myform.text.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
Using ng-message, ng-maxlength, ng-minlength or any kind of validation in angular it use the name attribute instead of ng-model. So in your code you must use ng-messages = "myform.text.$error".
The problem is
you're referencing the model rather than the name of the input field itself in ng-messages.
You didn't define an input type. make type="text"
Renamed the input name to username, however in the model itself you should store it to an object IMO
I've corrected it below, try this instead
<form name="myform" ng-submit="submit">
<input name="username" type="text" ng-model="user.name" required>
<div ng-messages="myform.username.$error">
<div ng-message="required">Field is required</div>
<div ng-message="has_spaces">Field must not contain spaces</div>
</div>
</form>
In my controller I update a textarea with $http. It works as expected. But now I would like to bind message1, and message2 to from model, how to do it ?
RESULT:
This is {{message1}} in 1st line
This is {{message2}} in last line
in CONTROLLER:
$scope.myTextArea = response.data;
in HTML:
<form name="myform">
<p><input type="text" ng-model="message1"/>Message1</p>
<p><input type="text" ng-model="message2"/>Message2</p>
</form>
<p>
<textarea type="text" id="textarea" model="myTextArea" cols="80" rows="10" >
{{myTextArea}}
</textarea>
</p>
Wrapping means that you need to place your code inside the built-in ng-controller directive in order to achieve anything.
Here is also a working copy at plunker.
<body ng-app="myApp">
<form name="myform" ng-controller="myController">
<!-- Place your "RESULT" inside the controller (myController) scope -->
This is {{message1}} in 1st line <br />
This is {{message2}} in last line
<p><input type="text" ng-model="message1"/>Message1</p>
<p><input type="text" ng-model="message2"/>Message2</p>
</form>
<p>
<textarea type="text" id="textarea" model="myTextArea" cols="80" rows="10" >
{{myTextArea}}
</textarea>
</p>
</body>
You mean that you want to put both messages to textarea? Then you need to use watch
$scope.$watchGroup(['message1', 'message2], function(newValues, oldValues, scope) {
$scope.myTextArea =
'This is '+message1+' in 1st line\r\n'+
'This is '+message2+' in last line'
});
I'm having trouble getting a message to display when the field input is invalid. I can see the classes being correctly applied to the element i.e. ng-dirty ng-invalid ng-invalid-pattern so I just need to make the error message display. Is there an issue with my html?
Thanks!
<form ng-controller="FormCtrl" name="TestForm" action="http://myserver/api" method="post" novalidate>
<div class="form-group">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-ng-model="model.tfn">
<span class="error" data-ng-show="model.tfn.$invalid">Correct input etc...</span>
</div>
</form>
The information you are looking for is part of the FormController. You need to setup a formController via ng-form directive:
<div class="form-group" ng-form="myForm">
<input class="form-control" type="text" id="vld" name="vld" data-ng-pattern="/(^$)|(\b\d{9}\b)/" data-mg-model="model.tfn">
<span class="error" data-ng-show="myForm.vld.$invalid">Correct input etc...</span>
</div>
If this is done you may access the information by [Name of the OFrmController].[Name of the input field].$invalid e.g. myForm.vld.$invalid