I have an input and I would like to set the input as dirty right away:
<input ng-model="something">
I tried:
<input ng-model="something" class="ng-dirty">
but it does not work.
Take a look at this
Working Demo
html
<div ng-app="">
<form name="myForm" ng-controller="Ctrl">
userType: <input name="input" ng-model="userType" required/>
<span class="error" ng-show="myForm.input.$error.required">Required</span><br></br>
</form>
</div>
script
function Ctrl($scope) {
$scope.userType = '';
}
In general, Angular does the determination if the field is dirty, not you. That being said, you can force it by calling $setDirty() on that element.
<form name='theFormName'>
<input name='theElementName' type='text' />
</form>
In the controller:
$scope.theFormName.theElementName.$setDirty();
You will find more information in the Angular documentation. This isn't something that you should be doing often, though.
Related
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'
});
Trying to show a message of how many chars were used for a text field as-you-type (similar to the comments in Stackoverflow)
I'm using AngularJs with a form.
Code looks like this:
<form name="form">
<input type="text" name="inp" ng-model="myval" ng-minlength="10">
<span>
You have used --INPUT-LENGTH--
</span>
</form>
How can I make --INPUT-LENGTH-- show the current length of the input field?
Thanks!
simple use the .length attribute
<form name="form">
<input type="text" name="inp" ng-model="myval">
<span>
You have used {{myval.length}}
</span>
</form>
In its simplest form you can rely on angular binding mechanism which will update dependent variables when things change.
<form name="form">
<input type="text" name="inp" ng-model="myval">
<span>
You have used {{myval.length}} characters
</span>
</form>
I am trying to follow the AngularJS example of doing inline validations of required fields. However when it comes to using a ng-repeat, it doesn't seem to work for me.
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" />
<span class="error" ng-show="myForm.myName.$error.required">Required!</span>
<div ng-repeat="friend in friends">
Friends: <input required type="text" name="myFriend[{{$index}}]" ng-model="friend.name" />
<span class="error" ng-show="myForm.myFriend[{{$index}}].$error.required">Required</span>
</div>
</form>
JSFiddle
Any idea what I am doing wrong or what I can do to fix it?
Unfortunately you cannot do it that way. The input element does not like having the name dynamically generated. You will need to use ng-form as a subform and wrap the repeated element. Here is a fork of your fiddle: http://jsfiddle.net/p26VQ/
<div ng-controller="MyCtrl">
<form name="myForm" novalidate>
Me: <input required type="text" name="myName" ng-model="name" /><span class="error" ng-show="myForm.myName.$error.required">
Required!</span>
<div ng-repeat="friend in friends">
<ng-form name="subform{{$index}}">
Friends: <input required type="text" name="myFriend" ng-model="friend.name" />
<span class="error" ng-show="subform{{$index}}.myFriend.$error.required">Required</span>
</ng-form>
</div>
</form>
</div>
Using at least AngularJS 1.4.3 you can use this:
name="formControl_{{uniqueId}}"
And this:
ng-messages="myForm[ 'formControl_' + uniqueId ].$error"
Taken from the comment at https://github.com/angular/angular.js/issues/1404#issuecomment-125805732 found in the issue referenced by Danny.