This question already has answers here:
What are the nuances of scope prototypal / prototypical inheritance in AngularJS?
(3 answers)
Closed 5 years ago.
I am trying to get data in angular js controller using angularjs form submission ng-submit="method"
Normally all data I can see in controller using alert(). Now the problem is if I use ng-if condition inside of angular form then this specific field value show undefined. How can I solve this?
<div class="row" id="BarcodeDiv">
<span ng-model="br" ng-init="br=1" id="br" style="display:none;"><i class="fa fa-etsy" aria-hidden="true"></i></span>
<span ng-if="br==2">
<div class="col-sm-6">
<label>Serial Number</label> <span ng-click="barCodeChanger()" style="cursor:pointer;"><i class="icon-rotate-cw3"></i></i></span>
<input type="text" name="Barcode" ng-model="Barcode1" class="form-control" placeholder="123">
</div>
<div class="col-sm-3">
<label>From</label>
<input type="text" name="StartFrom" ng-model="StartFrom" id="StartFrom" class="form-control" placeholder="4" style="padding:5px;">
</div>
<div class="col-sm-3">
<label>To</label>
<input type="text" name="ToEnd" ng-model="ToEnd" id="ToEnd" class="form-control" placeholder="9" style="padding:5px;">
</div>
</span>
<span ng-if="br==1">
<div class="col-sm-12">
<label>Serial Number</label> <span ng-click="barCodeChanger()" style="cursor:pointer;"><i class="icon-rotate-ccw3"></i></span>
<input type="text" name="Barcode" ng-model="Barcode" class="form-control" placeholder="123">
</div>
</span>
</div>
Keep in mind that ng-if is scope true so the vars won't necessarily show in your controller. Try replacing ng-if with ng-show. You should see the values.
However, ng-if is more efficient than ng-show.
Another option would be to create object in your controller let's say $scope.submitData = {} and bind Barcode1, ... via this object. So in your controller you would have to initialize `$scope.submitData = {}' and in the view you would reference it as
ng-model='submitData.Button1
Related
Hello I am beginner of Angularjs and I want to build dynamic validations.Here is my code shortened as well as possible.
JS
$scope.inputValidates = [
{ 'name':'name',
'validate':'required',
},
{ 'name':'email',
'validate':'type = email',
}]
HTML
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" {{item.validate}}>
</div>
I want this input result as
<input name=name ng-model="vm.useraccount[vitem.name] required>
<input name=name ng-model="vm.useraccount[vitem.name] type = email>
Thanks for taking time for this.
Use ng-required:
<div ng-repeat="vitem in vm.inputValidates">
<input name={{vitem.name}} ng-model="vm.useraccount[vitem.name]" ng-required="item.validate">
</div>
By the way, I see you assigned inputValidates to your $scope. So you should be accessing it in your view by inputValidates, not vm.inputValidates.
Sample is HERE
Sample contains both required and pattern validation applied on textbox rendered using ng-repeat and use ng-switch based on your validation type
<div ng-repeat="field in fields">
<div style="width:600px">
<div ng-form name="validMe" style="width:58%;float:left" ng-switch="field.validationType">
{{field.name}} :
<div ng-switch-when="required">
<input id="input{{$index}}" name="input{{$index}}" type="text" ng-model="field.value" required>
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.required ">Field Required!</span>
</div>
<div ng-switch-when="email">
<input type="email" id="input{{$index}}" name="input{{$index}}" ng-model="field.value" ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+#[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/">
<span style="color: #a94442" ng-show="validMe['input\{\{$index\}\}'].$error.pattern">Not a valid email!</span>
</div>
</div>
</div>
</div>
I have an AngularJS directive with multiple transclusions and one transclusion slot is wrapped by a form.
Everything is working fine except for the form validation messages.
The directive template:
<ng-form name="nbcardform" ng-submit="submit()" novalidate>
<ng-transclude ng-transclude-slot="back"></ng-transclude>
<div class="row">
<div class="col-xs-12">
<button type="submit">Save</button>
</div>
</div>
</ng-form>
Here is an example of the directive usage:
<nb-card>
<nb-card-back>
<input type="text" name="username" ng-model="vm.username" required>
<div ng-messages="nbcardform.username.$error" role="alert">
<div ng-message="required">Required field</div>
</div>
</nb-card-back>
<nb-card>
For some reason the expression nbcardform.username.$error is undefined.
Can someone help me with this?
You should be creating a subform in your directive as it's scope is (likely?) different and it has no idea what nbcardform is.
<nb-card ng-form="myDirectiveForm">
<nb-card-back>
<input type="text" name="username" ng-model="vm.username" required>
<div ng-messages="myDirectiveForm.username.$error" role="alert">
<div ng-message="required">Required field</div>
</div>
</nb-card-back>
<nb-card>
This will still wire in nicely and in the parent directive you could use something like this:
<ng-form name="nbcardform" ng-submit="submit()" novalidate>
<ng-transclude ng-transclude-slot="back"></ng-transclude>
<div class="row">
<div class="col-xs-12">
<button type="submit">Save</button>
</div>
</div>
{{ nbcardform.$valid }}
{{ nbcardform.myDirectiveForm.$valid }}
{{ nbcardform.myDirectiveForm.username.$valid }}
</ng-form>
Have you tried:
<div ng-messages="vm.username.$error" role="alert">
The transcluded content uses the outer scope unless you specify a different scope to the transclude function in your linking function. See "Providing your own Transclusion Scope" here. Note that once you do that, you may no longer be able to reference vm.
I have a simple page with validating the field, something like this:
employee.html and its validating the field but if I have added the same code and called the same page using ng-include the validating is not working
without ng-include validate works:
<form name="form" class="form-horizontal" ng-validate="create(data)" novalidate>
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<label for="" class="col-xs-6 control-label">First Name:</label>
<div class="col-xs-6">
<input name="first_name" type="text" class="form-control" ng-model="data.first_name" placeholder="First name" ng-required="true">
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
</div>
</div>
</div>
</div>
</form>
with ng-include validate does not works:
dashboard.html
<div class="container">
....................
..................
<ng-include src="employee.html"></ng-include>
</div>
my question is: how can I make the validation works within ng-include?
yes your $submitted is not working angular version 1.3. if you need to show the message if only form is submit then you can keep a variable to detect whether the form is submitted or not.
to do that
in controller test function
$scope.create = function(data) {
$scope.formSubmitted = true;
}
in validation message use formSubmitted instead of $submitted
<div class="alert alert-danger" ng-show="formSubmitted && form.first_name.$error.required">E..
here is the working Plunker
But if you are using angular 1.3 or later version
angular introduce a $submitted in angular 1.3.x and may be your trying with a older angular version, upgrading angular will solve your problem.
here is the Changes of the 1.3 - please check the
new feature: Add new $submitted state to forms
<div class="alert alert-danger" ng-show="form.$submitted && form.first_name.$error.required">Enter first name.</div>
here is the working plunker
You can use bootstrap validation in ui like that
<form name="personalinformation">
<label for="fname"> First Name<span style="color:red" ng-show="personalinformation.firstname.$error.required">*</span></label>
<input type="text" class="form-control" id="" placeholder="First Name" ng-model="PerInfo.FirstName" required name="firstname">
</form>
and if you validation by angular you can create validationFunction and ng-click pass the value of text or other element in controller.If input type is false then you cal fill value in ng-show="true"
Use <ng-form></ng-form> instead of <form></form>
I have an input that is created using ng-repeat
<div data-ng-repeat="(index, answer) in currentQuestion['possible_answers']" class="form-group">
<label class="col-md-3 control-label">Answer {{ index + 1 }}</label>
<div class="col-md-8">
<div class="input-icon">
<i class="fa fa-sun-o"></i>
<input data-ng-model="currentQuestion['possible_answers'][index]" type="text" class="form-control" >
</div>
</div>
</div>
I want this to prepopulate the inputs with the values that are in currentQuestion['possible_answers'] and I also want any changes to bind to this variable as well.
However, everytime I start typing into one of these text fields, I type one letter and then it looses focus of the input box. I have a feeling that this is because I start typing and the data bidning updates currentQuestion. Because currentQuestion is updated, the ng-repeat is executed again.
Is there a way to make the ng-repeat action a one off action isntead of constantly revalutating?
Yes (looking at the symptoms, you did not show us the data) your issue could be because your model is the text in the array that you (may have), so whenever you update the model, it will trigger digest cycle since ng-repeat is tracked by the text. You can easily fix this by providing. track by $index, so that the ng-repeat is watched over and repeat watch gets updated only when the array changes in its length.
<div data-ng-repeat="answer in currentQuestion['possible_answers'] track by $index" class="form-group">
<label class="col-md-3 control-label">Answer {{ $index + 1 }}</label>
<div class="col-md-8">
<div class="input-icon">
<i class="fa fa-sun-o"></i>
<input data-ng-model="currentQuestion['possible_answers'][$index]" type="text" class="form-control" >
</div>
</div>
</div>
Demo
You can also use $index to get the array's index. you do not need to iterate with (key, value).
However i would just make my answer array an array of objects and get rid of all these issues, and it would just be (_note the usage of $index and ng-model):-
<div data-ng-repeat="answer in currentQuestion['possible_answers'] track by $index" class="form-group">
<label class="col-md-3 control-label">Answer {{ $index + 1 }}</label>
<div class="col-md-8">
<div class="input-icon">
<i class="fa fa-sun-o"></i>
<input data-ng-model="answer.text" type="text" class="form-control" >
</div>
</div>
</div>
Demo
The ng-repeat creates a new child scope for each item in the list. In this scope it knows index and answer. You bind the value of the input to something outside the scope, namely the same item in the array. Changing it triggers the list to be redrawn, which causes the input to loose focus.
<div data-ng-repeat="(index, answer) in currentQuestion['possible_answers']" class="form-group">
<label class="col-md-3 control-label">Answer {{ index + 1 }}</label>
<div class="col-md-8">
<div class="input-icon">
<i class="fa fa-sun-o"></i>
<input data-ng-model="answer" type="text" class="form-control" >
</div>
</div>
</div>
I have a page where multiple forms are created based on ng-repeat. Everything works fine until write something into the input and everything gets duplicated on all the other repeated forms input elements. I have used ng-model="Notify.message" which is nothing but object which takes the value from the input and sends to control on button submit and hence rest of the logic.
I am looking for when if one form is been filled, other forms should keep quite and shouldn't duplicate the values written in input text of form 1.
Here is the code:
<div data-ng-show="alluserposts.length > 0">
<div id="b{{userpost.id}}" data-ng-repeat="userpost in alluserposts" >
<div class="row" style="margin-left: -5px">
<form class="text-center" role="form" id=f1{{userpost.id}} name="userForm"
ng-submit="notify(userForm.$valid, userpost, apiMe)" novalidate>
<div class="row">
<div class="col-xs-8 col-md-4">
<div class="form-group">
<input data-container="body" data-toggle="popover" data-placement="top"
data-content="Any message which you would like to convey to post owner"
type="text" ng-model="Notify.message" data-ng-init="Notify.message=''"
id="u{{userpost.id}}"
placeholder="Enter a Message or Phone number" class="form-control"
required>
<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">It is
required.</p>
<script>$(function () {
$("[data-toggle='popover']").popover();
});
</script>
<input type="hidden" ng-model="Notify.loggedInEmail"
ng-init="Notify.loggedInEmail = result.email"/>
<input type="hidden" ng-model="Notify.postId" ng-init="Notify.postId = userpost.id"/>
<input type="hidden" ng-model="Notify.destEmail"
ng-init="Notify.destEmail = userpost.userEmail"/>
</div>
</div>
<div ng-show="loginStatus.status == 'connected'" class="col-xs-4 col-md-2">
<button class="btn btn-primary" ng-disabled="userForm.$invalid || !userForm.$dirty"
type="submit">
Notify Post Owner
</button>
</div>
</div>
</form>
</p>
</div>
</div>
</div>
</div>
Issue fiddle - jsfiddle
Here you can when something is written in one input, other gets filled too :( . Also Notify is a Java mapped object and message is a variable inside it. Pls let me know how can this can be segragated!
You bind all of your inputs to same variable on $scope.
You must bind every text box to a distinct variable on $scope:
View:
<ul ng-repeat="post in posts">
<li>{{$index}}
<input type="text" ng-model="emails[$index]"/>
</li>
</ul>
Controller:
$scope.emails = [];
I am also at the starting phase of angularjs.
I have faced the same issue few days ago and resolved it by providing dynamic model name in ng-model like
<input type="text" ng-model="Notify[post.userEmail]" ng-init="Notify[post.userEmail] = post.userEmail" />
Working fiddle: Fiddle