My requirement is to update the email id.When I enter the email manually in input box its getting mapped with ng-model and calling controller, but for prepoluted value its not getting mapped to ng-model.
<div class="col-sm-12">
<input type="text" class="form-input form-control" id="defaultInputText" ng-model="details.emailAddr" placeholder="yourname#email.com">{{accSummary.response.custEmail}}
</div>
I tried with ng-bind="accSummary.response.custEmail" and value="{{accSummary.response.custEmail}}" but no luck.
Can anybody help me what I am missing here..!! thanks in advance
Set this model from controller as a prepopulated value accSummary.response.custEmail.
$scope.accSummary.response.custEmail = "YOUR_DEFAULT_VALUE";
Set default value of that model in controller.
Related
So I've recently taken over an Angular Giving Form Application. I am running validation on the email field using ng-pattern and displaying the errors on blur with ngMessages. The validation works great, however once the validation passes as $valid if the user decides they need to make a change in their email and begin to delete part of the first deletion deletes the last character of the email as expected, but the second deletion deletes the entire field forcing the user to start from scratch.
The regex for ng-pattern is being set in the controller scope with the variable $scope.emailre
The files are much to large to place here but here is the link to the site I am working on for my client.
https://epiqa.moodyglobal.org/corporate/
Snippet of Angular controller:
myApp.controller('mainCtrl', function($scope, localStorageService, $http) {
$scope.emailre = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
Snippet of HTML Form:
<div class="row form-group">
<div class="col-sm-6">
<div>
<label class="label" for="txt_donorEmail">E-mail:</label>
<input ng-class="{ 'submitted-error' : givingForm.email.$invalid && submitted }" ng-model="email" type="text" id="email" name="email" class="textbox required full form-control" maxlength="50" ng-pattern="emailre" required />
</div>
<div ng-messages="givingForm.email.$error" ng-if="givingForm.email.$touched || submitted">
<div class="errorText" ng-message="required">This field is required</div>
<div class="errorText" ng-message="pattern">Enter a valid email</div>
</div>
</div>
</div>
I have tried changing the input type from type="text" to type="email" but when doing that any time the user types two (.) periods the field gets immediately deleted.
Please help any ideas are very welcome.
The behavior is caused by this section
$scope.$watch('email', function(value){
localStorageService.set('email',value);
$scope.emailValue = localStorageService.get('email');
});
By Angular documentation
The default behaviour in ngModel is that the model value is set to undefined when the validation determines that the value is invalid. By setting the allowInvalid property to true, the model will still be updated even if the value is invalid.
I'm not sure whether you want to save the invalid email into localStorage, though. Maybe you can add a check only update when the value is valid.
In my Angular app I have a field that accepts either an email address or a phone number.
If a number is entered I want to show a particular span. However I can't seem to get this working.
So in my controller I have written:
$scope.isNumber = function (n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
Then in my HTML I have:
<form name="registrationForm">
<div>
Email or Mobile
<span ng-show="isNumber(registrationForm.usernameReg)">Include the country code.</span>
</div>
<input name="usernameReg" ng-change="main.change()" type="text" ng-model="main.username">
</form>
Any ideas why this wouldn't work?
Thanks.
You need to be testing the value of the model.
try
ng-show="isNumber(main.username)"
registrationForm.usernameReg is an object that contains numerous properties used as part of validation.
To better see this add <pre>{{registrationForm |json}}</pre> in your view
I have been toying around with a modal form, the form works great to submit data, but now I need the form to edit data. So I want to populate the form from a callback from the server. The structure of the form is as follows:
HTML:
<div class="form-group modalContent">
<label for="manufacturer">MANUFACTURER</label>
<select class="form-control" id="manufacturersList"
ng-model="form.manufacturers" required
ng-options="man.manufacturer for man in manufacturers | orderBy:'manufacturer'"></select>
</div>
AngularJS:
$scope.form = {
//The value will be the value from the callback
"manufacturers": "Acer"
}
EDIT: CALL BACK
{"status":{"error":"none","code":200,"description":"none","message":"success"},"manufacturers":[{"manID":"2",
"manufacturer":"Acer"},{"manID":"3","manufacturer":"Honeywell"},{"manID":"11","manufacturer":"HP"},{"manID":"9","manufacturer":"Juniper"},{"manID":"1","manufacturer":"Lenovo"},{"manID":"6","manufacturer":"Logitech"},{"manID":"8","manufacturer":"Netgear"},{"manID":"7","manufacturer":"Other"},{"manID":"10","manufacturer":"StarTech"},{"manID":"5","manufacturer":"Viewsonic"},{"manID":"4","manufacturer":"Zebra"}]}
Shouldn't this populate the value in the <SELECT>?
ng-model points to the variable that holds the selected value.
And according to the syntax you used in ng-options you should place manufactures in $scope directly.
<select class="form-control" id="manufacturersList"
ng-model="selectedManufacturer" required
ng-options="man for man in manufacturers | orderBy:'manufacturer'">
</select>
$scope.manufacturers = ["Acer", 'HP', 'Toshiba', 'Lenovo', 'ASUS'];
Example in Plunker
Hope this helps
Why does angular and the checkbox model not bind to the checked="checked". The checkbox is unset once angular loads.
eg: http://jsfiddle.net/5CZ74/2/
<div ng-app>
<form>
<input type="checkbox" ng-model="redirect" checked="checked">
<input type="text" ng-disabled="redirect==false">
</form>
</div>
When my form loads I am setting it enabled or disabled on the server as per server entity. How do I get the angular model to correctly bind to this value to enable or disable the input text field.
Thanks.
You have not defined redirect in your model anywhere, so it is undefined, and thus falsy. This is why the the checkbox is not checked. If you want it checked you need to add redirect to your model and set it to true. You need to have a controller and do this:
$scope.redirect = true;
See http://jsfiddle.net/5CZ74/3/
Is there anyway that I can bind two model values to one input field?
Suppose I have input field which I want to be the value of two variables in the scope something like:
<input type="text" model="sn_number; id" >
You cannot, but there are some workarounds.
1. Use ngChange to update the other model
<input type="text"
ng-model="sn_number"
ng-change="id=sn_number"/>
2. You could watch a model, and when in changes, update another
$scope.$watch('sn_number', function(v){
$scope.id = v;
});
You would need to watch also for changes in id if you want to keep them in sync.
Example here
You can bind fields immediately, not only in ng-change, and actually it isn't data binding, its only angular expression
<label>Name</label>
<input type="text" ng-model="name" value="{{name}}"/>
<label>Key</label>
<input type="text" ng-model="key" value="{{key=name}}" />
It would make no sense to bind an input to two variables in the model. Binding works both ways, so if the model is updated, the field is updated and vice-versa. If you were to bind to two variables, what would be the single source of truth?
However you can use ng-change to call a method on the controller which can set two variables when the field changes.
with ng-init
<div ng-controller="ctrl" ng-init="model = { year: '2013', month:'09'}">
or
<div ng-repeat="c in contact" ng-init="likes = { food: 'steak', drink:'coke'}">