I'm generating a group of radio buttons options from a JSON object which is requested when another radio button is selected. This works as expected but the form validation is not working correctly since the form only becomes valid if all the options in the radio button group are first clicked.
My mark-up for the radio button:
<div data-ng-repeat="option in options" class="radio">
<label>
<input type="radio" name="decline_type_id" ng-model="decline_type_id" value="{{option.id}}" ng-required="!decline_type_id" />
<strong>{{option.name}}</strong>
</label>
</div>
Here is my plunker:
https://plnkr.co/edit/B7KgUt4GMrnSATYIQuN5?p=preview
The same mark-up without the loop works as expected, so I don't understand what it is about the loop used to generate the list that is breaking the validation of the form until all options are selected?
This is a Angular scoping issue. The ng-model inside the ng-repeat is using a child scope.
The ng-model="decline_type_id" was unique for each iteration of the loop. So ng-required check was for each unique model.
You can make use of $parent scope to do the ng-required checking on a shared variable instead.
<input type="radio" ng-model="$parent.decline_type_id" value="{{option.id}}" ng-required="!$parent.decline_type_id" />
Related
Using AngularJS & Ui-router.
Problem scenario:
I have a set of fixed radio button on 10 over pages with
Daily, Weekly , Monthly and Yearly.
Toggling the radio button above will do a state.go which will set the state params to the value of the radio button selected (using ng-change, ng-model).
Current code which I duplicated on every page.
Now I would like to create an AngularJS Component for those radio buttons.
<div>
<label>
Daily
<input type="radio" ng-model="dateModel" value="Daily" name="radioDateType"
ng-change="SetDateTypeOption(dateModel)">
<span class="checkmark"></span>'
</label>
<label>
WTD
<input type="radio" value="WTD" ng-model="dateModel" name="radioDateType"
ng-change="SetDateTypeOption(dateModel)">
<span class="checkmark"></span>
</label>
</div>
This is a simplified plunker (Not working) but you can see what i'm trying to achieve.
First - I'm unable to even get the radio button to show despite already using a template.
Second - If it's able to show, I want it to show an alert when I toggle between the radio buttons (This is a test that the ng-change is working)
Lastly - I'll need to implement $state.go on every ng-change.
https://plnkr.co/edit/N5CDz0ZBhSG1leq3Hiw2?p=preview
The reason it's not loading is because you're not bootstrapping your app. Just add the ng-app directive to body. Everything else is correct.
See updated link: https://plnkr.co/edit/P34c6im4ojUI69sQDfhh?p=preview
I have a set of projects in an object each projects come with this HTML section
<label class="checkbox-container">
<input ng-click="addProcurementToPlan(project)"
ng-show="showCheckBox()"
class="checkbox"
type="checkbox">
<span class="checkmark"></span>
</label>
I want to ensure that if a property in my project is true then my HTML checkbox should show checked or selected.
When I inspect my HTML element when I click the checkbox I can't see the angularjs property that is making my tag look selected or checked for me to write a function for it.
The ng-selected directive only works for <select> tags.
For input of type "checkbox", use the ng-checked directive instead.
<input ng-click="addProcurementToPlan(project)"
ng-show="showCheckBox()"
class="checkbox"
type="checkbox"
ng-checked="property">
If $scope.property is true, then your box should be checked.
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 trying to use AngularJS Validation in order to validate a simple form, however I was having troubles getting my ng-class to show the correct class based off whether or not the input was dirty or not. Then when I looked at the actual HTML of the page, the <form> tags are not even in the document at all!
<form novalidate name="infoForm">
<p>To start, provide some basic information about the project.</p>
<ul class="ulFormGeneral">
<li>
<label>Company name</label>
<input id="CompanyName" ng-class="{ cvError : infoForm.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
</li>
</ul>
</form>
I want the cvError class to be added to this input if it is dirty, but nothing happens when I look at this in the browser. What am I doing wrong that is causing the <form> to just leave the DOM and then not work with my Angular expressions?
Welcome to the Angular world, no forms required! Here, the model is king. It looks like the problem is the ng-model and ng-class are point at different places.
Point everything at form.CompanyName (assuming that is the model name is form in the $scope):
<input id="CompanyName" ng-class="{ cvError : form.CompanyName.$dirty }" ng-model="form.CompanyName" name="CompanyName" maxlength="100" type="text" required />
The ng-model binds to the $scope. When you change the input field, it is automatically updated in the $scope. No form is needed or hitting a submit button to get the data. The $scope is updated with each key stroke.
The controller should do the work of figuring out what to do with the changes in the model. For example, you can add an ng-click to a button that fires a function defined by the controller to save the model.
I am generating a bunch of radio buttons using ng-repeat, and then trying to update a model when one of them is selected. This doesn't appear to be working.
The same markup works just fine when the radio inputs are hardcoded as opposed to being generated by ng-repeat.
This works:
<input type="radio" ng-model="lunch" value="chicken" name="lunch">
<input type="radio" ng-model="lunch" value="beef" name="lunch">
<input type="radio" ng-model="lunch" value="fish" name="lunch">
{{lunch}}
This doesn't:
<input type="radio" ng-model="lunch" ng-repeat="m in meat" value="m" name="lunch">
{{lunch}}
See jsfiddle showing both here: http://jsfiddle.net/mark_up/A2qCS/1/
Any help would be appreciated.
Thanks
<div ng-controller="DynamicCtrl">
<input type="radio" ng-model="$parent.lunch" ng-repeat="m in meat"
ng-value="m" name="lunch">
{{lunch}}
</div>
Should do the trick.
As I understand it, ng-repeat creates its own $scope. so you need to refer to the $parent $scope; Yes, AngularJS is tricky. Also you need to change the value to ng-value too.
the above issue was discussed here
That happens because ng-repeat creates a new scope. Basically, each <input> is creating a selectedOption value on its own inner scope. To work around that, create a new container object for that value. For example, you could declare in your controller:
$scope.data = {selectedOption: x};
And then in your template, use ng-model="data.selectedOption"
in this way, ng-model gets updated .. :)
this is tricky
Just need to replace value with ng-value