I have created textboxes dynamically when button is clicked.But even if the text box is empty it is saving the text boxes.But i have number of text boxes which are created dynamically.how to identify the particular empty text box and validate it.I am trying the validation when save button is clicked.Can anyone help me to solve this.
//onclick creating textboxes
$scope.expndtxt=function(){
$scope.textboxes.push("");
};
//view
<li ng-repeat="textbox in textboxes track by $index">
Label For Inputfield:
<input type="text" id="in_{{$index}}" data-ng-model="$parent.textboxes[$index]"/><button class="btn btn-sm btn-default" ng-click="deletetxtbox($index)">-</button>
</li>
Use angular $valid when the user will click the save button you could use $valid whether it has a value or empty in your controller like
textBoxes.saveButtn = function(textFields) {
if (textFields.$valid) {
<----Put your code ---->
}
else{}
}
Related
Is there a way to inject some validation - custom or otherwise - that isn't tied to a form element? Like - validate that some condition is met, but have it work with standard AngularJS validation?
Update:
Here's what I'm trying to accomplish:
I have a form contains a list of sections. Each section is controlled by a checkbox, and the section will display (via an ng-if) when the checkbox is checked.
Within each section, there's an opportunity for an item to be selected via a popup modal that is activated by a button click. Until an item is selected for that section, the form needs to be invalid. Once an item is selected for each selection that is checked, then the form needs to be valid.
I have a button at the bottom of the form with an ng-disabled="frm.$invalid". I want that to stay disabled until each section that has been checked contains an item that was selected via the modal.
Update 2:
Here's some example code:
<form class="form-horizontal" role="form" name="frm" novalidate>
<label>Name: </label>
<input type="text" ng-model="name" required/>
<div ng-repeat="orderItem in orderItems">
<input type="checkbox" name="items[]" ng-model="orderItem.selected"/>
<div ng-if="orderItem.selected">
... bunch of form fields
<button ng-click="openExchangeSelectionModal(orderItem)">Select Item</button>
<div ng-show="orderItem.exchange_item">
Selected Item: {{orderItem.exchange_item.name}} - ${{orderItem.exchange_item.price | number: 2}}
</div>
</div>
</div>
<button ng-disabled="frm.$invalid" ng-click="submitOrder">Submit</button>
</form>
Checking if the form is valid won't help you in this case since there is no required input that's not being filled.
What I would recommend is that the disable button would call a function that makes some logic about the number of check boxes expanded and the number of selected items and returns the buttons state (true for active otherwise false)
Let's take the example code you put up:
//some html tags...
<button ng-disabled="checkValid()" ng-click="submitOrder">Submit</button>
</form>
Notice that I changed the frm.$invalid to checkValid function, which is a function that is defined on your controller and can perform any logic you want to determine rather show your submit button or not.
I am dynamically creating form fields using ng-repeat. I have a div with several inputs/selects and when I click an "add" button, they gets duplicated. No problems so far. However, I also want to perform form validation when the submit button is clicked. Right now, I am doing the following to alert users a field is invalid when the submit button is pressed:
.ng-submitted select.ng-invalid, .ng-submitted input.ng-invalid {
background-color: red;
}
This works as expected provided I have not dynamically added inputs to the form. If I add new inputs to the form, .ng-submitted gets added to my form element (without submit being pressed) and all the required and invalid inputs turn red. You can see an example of this here: https://plnkr.co/edit/hDe40mBDjw9aDSDoAhe6?p=preview
Not only do I not want the inputs turning red when simply adding elements, I also don't want the form submitting unless someone has hit the submit button. There must be something I don't understand about submit with angular forms and help would be appreciated.
EDIT: further testing shows that the button element is the problem.
<button ng-click="addRow()">add</button>
This works fine however:
<input type="button" ng-click="addRow()" value="add"/>
Not sure why this is though.
The default value of the type of a button is "submit". So clicking it submits the form. Putting type="button" explicitly prevents the form being submitted when the button is clicked.
If you want to use form submit you need to use ng-submit on form and change button type to submit.
<form name="form" ng-submit="addRow()">
<div>
<div ng-repeat="row in rows track by row.id">
<input type="number" min="0" ng-model="row.id" required/>
</div>
<button type="submit">add</button>
</div>
</form>
There were multiple changes needed in your code. I have fixed them in this plunker: https://plnkr.co/edit/GEWdCo1cQPPEFJcZxT58?p=preview
--- HTML ---
<div class="btn-group menuSection">
<div class="menuGrid" ng-repeat="main in mains">
<button type="button" class="btn btn-default btn-sm btn-block"
ng-value="main" btn-radio="main" ng-model="$parent.selectedMain"
ng-click="setDish();"/>
{{main}}
</div>
<div class="menuGrid">
<input type="text" class="form-control input-sm"
ng-model="mainOtherText" ng-show="selectedMain == 'Other'"
placeholder="enter other here"/>
</div>
test : {{mainDish}}
</div>
--- JS ---
$scope.setDish = function(){
if ($scope.selectedMain == 'Other') {
$scope.mainDish = $scope.mainOtherText;
}
else {
$scope.mainDish = $scope.selectedMain;
}
};
I have a grid of radio buttons for selecting menu items, the last of which is 'Other'. When 'Other' is selected, a textbox shows up where the user inputs another item. My goal with the ng-click function is to update the variable mainDish with the value in the other textbox when 'Other' is selected.
This code works, however, the problem arises in that the variable mainDish only updates when the radio button is unselected.
Example - when a button is first clicked, it will have no affect on the variable mainDish, but then when another button is clicked mainDish is updated to the value of the first button clicked.
Any ideas on to why this is happening or ways I could fix it?
EDIT:
As per comment, I'll explain my code a bit more. I have a menu, a list of meals that the user picks from. This list is populated by the ng-repeat command grabbing from an array of meals and creating a radio button for each. The last item in the array is an item called 'Other'. When 'Other' is selected, a textbox appears so the user can input their own dish.
What I want: I want the variable mainDish to be assigned the value of the 'Other' textbox when the 'Other' radio box is selected. For all of the other items, the value of mainDish is just the value of the radio button, but this is not the case with 'Other'.
What I have: It works! But in an odd way. The variable mainDish is only updated when the radio button is deselected. Every time you click a new radio button, the variable mainDish gets assigned the value of the previous button. This is the problem I need help solving.
The problem is that ng-click fires before the ng-model code that updates the scope. If you change it to use ng-change, that will fix it. You also need to add ng-change to your text box to update the scope as the user types.
<div class="btn-group menuSection">
<div class="menuGrid" ng-repeat="main in mains">
<input type="radio" name="dishes"
class="btn btn-default btn-sm btn-block"
ng-value="main"
ng-model="$parent.selectedMain"
ng-change="setDish();"/>
{{main}}
</div>
<div class="menuGrid">
<input type="text" class="form-control input-sm"
ng-model="mainOtherText"
ng-show="selectedMain == 'Other'"
ng-change="setDish();"
placeholder="enter other here"/>
</div>
test : {{mainDish}}
</div>
Here is a working example: http://jsfiddle.net/bnzwx94b/2/
Hey guyz i am having issue related to checkboxes in html, i am using angularjs.
Whenever i checked one checkbox other checkbox getting selected and vice-versa.
Here's my Html code.
<form ng-show='MyForm'>
<div ng-controller="MyController">
<div name="sampleName" ng-repeat="sample in list" >
<input ng-model="q.sample" type="checkbox" >{{sample.name}}</label>
</div>
</div>
<button ng-click="submitForm()" >Submit</button>
<button ng-click="cancelForm()">Cancel</button>
</form>
But instead of using scope variable name 'q.sample', if i use only $scope.sample then it is working fine.
Still there is another issue with this too, On submitting data my form gets closed, but when i open it again, it shows me fresh form, there is no checked field, but if i cancel the form instead of submitting it with checked values and again opened it , i dont want the checked values to be present but i am getting the checked values instead of fresh form.
I tried to make values false in checkbox field on cancel button . See my Code of cancelForm()
$scope.cancelForm = function() {
$scope.MyForm = false
$scope.q.sample = false
}
So Basically, i have two questions, one is why i am getting all checkboxes selected on selected only one checkbox when i am using
$scope.q.sample
Second when i am using only
$scope.sample
scope value of sample is not reflecting on UI though it is reflecting in JS, i am getting the checked checkboxes.
It is because you are binding ng-model to the same controller property with this:
ng-model="q.sample"
Instead, if you want to select each individually then you need to have a different ng-model for each checkbox.
At the moment, you are changing q.sample and this, then, binds the value of q.sample to all the other checkboxes that define ng-model="q.sample".
Try something like this instead:
<div name="sampleName" ng-repeat="item in list" >
<input ng-model="item.checked" type="checkbox" >{{sample.name}}</label>
</div>
and then in cancelForm():
$scope.cancelForm = function() {
$scope.MyForm = false
angular.forEach($scope.list, function(item) {
item.checked = false;
});
}
Indeed as David Tryon mentioned, you are assigning the same ng-model to all the checkboxes and what you want is a different ng-model for each checkbox.
You can solve this by assigning a javascript expression to ng-model
for example:
ng-model="list[$index].checked"
I have an ng-form="step1" which is populated with data from db.
When the user changes some thing in the input boxes or selects a different radio btn, I want to display a Update Button.
This button will be hidden at first.
How to do this?
Thanks for Help
use $dirty function of angularjs
example
<input type="button" class="btn btn-primary" value="update" ng-show="changedetect.$dirty" />