I've got a table of packages produced by ng-repeat. I'm using bootstrap validation. It works fine on pages where there's only one record requiring input, but here I'm dealing with a repeater.
<form name="packingVm.PackageForm" ng-submit="packagingVm.ShipNow()" novalidate ng-init="submitted=false">
<table>
<thead>
<tr>
<th>Package Id</th>
<th>Width</th>
</tr>
</thead>
<tbody data-ng-repeat="package in packagingVm.Packages track by $index">
<tr>
<td>{{package.Id}}</td>
<td class="col-xs-1">
<input name="Width" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
<div class="error-message" ng-show="packagingVm.PackageForm.Width.$invalid && packagingVm.PackageForm.Width.$touched || package.submitted">
<span ng-show="packagingVm.PackageForm.Width.$error.required">Required.</span>
</div>
</td>
</tr>
</tbody>
</table>
</form>
What's happening is the rows are locked together. Getting an error on one row shows the error message on all rows.
I mean, I get why - I only have one packagingVm.PackageForm.Width, not one per row - but I don't know how to fix it.
Searching for bootstrap required ng-repeat isn't getting me much joy.
Answered here:
AngularJS required field validation in ng-repeat
Make the control name, and all references to it, dynamic, by adding {{$index}} to it, thus:
<tbody data-ng-repeat="package in packagingVm.Packages">
<tr>
<td>{{package.Id}}</td>
<td class="col-xs-1">
<input name="Width_{{$index}}" class="form-control input-inline input-sm" type="text" ng-model="package.Width" required valid-number />
<div class="error-message" ng-show="packagingVm.PackageForm.Width_{{$index}}.$invalid && packagingVm.PackageForm.Width_{{$index}}.$touched || package.submitted">
<span ng-show="packagingVm.PackageForm.Width_{{$index}}.$error.required">Required.</span>
</div>
What I can see, you are using the repeat for packagingVm.Packages but the required parts are dependent on packagingVm.PackageForm. You should have the specific required properties for each package(input). Else for all the inputs, one property of the controller is changed on which all required divs are dependent. So it shows for all the inputs.
Related
I'm able to insert the checked values to Db along with other values.Here I try to display the fetched values from the DB.The issue faced is, I want the selected value's checkbox to be checked and display the other values which I couldn't do it . Can anyone help me how to do it. I have attached a plunker how my current screen looks like.
HTML:
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="field in fields" name="slotSelection">
<td align="center">
<input type="checkbox" ng-model="field.checked">{{field.name}}
</td>
<td>
<select ng-model="time" ng-options="time for time in field.timeslots">
<option value="">select</option>
</select>
</td>
<td>
<input type="text" ng-model="interval" ng-blur="setTimeSlots(interval, field)">
</td>
</tr>
</table>
</body>
Code in Plnk
Use ngChecked option of Angular JS
<input type="checkbox" ng-checked="*expression*">
If the expression is truthy, then the checked attribute will be set on the element
<input type="checkbox" ng-checked="field.checked">{{field.name}}
Sample Plnkr
I am new to AngularJS. I would like to know how to track which all radio buttons and checkboxes were clicked or selected on clicking the submit button. The tables rows were created using ng-repeat. The checkboxes(as seen in the image) appear when the radio button in the third column is clicked(I do an ng-show="true") and can be selected.
Attached is a mockup.
Any good design pattern or sample code as well for this use case?
Please help.
Thanks in advance.
EDIT: Adding sample code.
<tr ng-repeat="event in data">
<td><input type="radio" name={{event.performanceID}}
ng-value="yes" /></td>
<td><input type="radio" name={{event.performanceID}} ng-value="no" />
</td>
<td><input type="radio" name={{event.performanceID}}
ng-value="maybe" />
<div class="checkbox">
<label> <input type="checkbox"> Approve
</label> <label> <input type="checkbox"> Bonuses
</label>
</div></td>
<td><img
ng-src="http://google.com/images/{{ event.imageName }}.jpg"
style="height: 100px; width: 100px" /></td>
<td>
<div>
<h4>Persons Name</h4>
<h5>{{event.Ename}}</h5>
</div>
<div>
<h4>Address</h4>
<h5>XXXXXXXXXXXXXX</h5>
</div>
</td>
</tr>
I am using AngularJS framework, and I have 2 checkbox fields: when the first is false the second is disabled, the data are saved on the server as JSON and when I click edit it recives and fill the data.
What I want to do is when I have a data in the second field I want the first field to be checked and and the second field not disabled.
This is my code:
<tr>
<td>
<label class="checkbox i-checks col-lg-offset-1 pull-right"><input type="checkbox" ng-model="excelLaunchCheck" ng-checked="defobj.data.excelLaunch == true"><i></i></label>
</td>
<td>Excel</td>
<td>Launch</td>
<td>
<label class="checkbox i-checks col-lg-offset-1"><input type="checkbox" ng-model="defobj.data.excelLaunch" ng-disabled="!excelLaunchCheck"><i></i></label>
</td>
</tr>
now when I have data in the second field, the first field is checked, but the second field is still disabled, how do I enable it?
I don't know your structure of mappings, but try something like this :
<tr>
<td>
<label class="checkbox i-checks col-lg-offset-1 pull-right"><input type="checkbox" ng-model="excelLaunchCheck" ng-checked="defobj.data.excelLaunch == true"><i></i></label>
</td>
<td>Excel</td>
<td>Launch</td>
<td>
<label class="checkbox i-checks col-lg-offset-1"><input type="checkbox" ng-model="excelLaunchCheck" ng-disabled="defobj.data.excelLaunch == false"><i></i></label>
</td>
</tr>
I have a repeater in my application and I am trying to add required field validation on the fields inside repeater. I used $index to generate id/name of the fields.
Form name is IPForm and used inside ng-class to highlight the error. Please see below code snap,
<tr ng-repeat="ClaimData in ClaimInfo">
<td>
<div ng-class="{ 'has-error' : IPForm.DateOfLoss{{$index}}.$invalid }">
<input type="text" id ="DateOfLoss{{$index}}" name="DateOfLoss{{$index}}" class="datefield form-control" ng-model="DateOfLoss"
required />
<span ng-if="IPForm.DateOfLoss{{$index}}.$invalid" class="help-block">Please enter Date of
Loss.</span>
</div>
</td>
</tr>
Problem is its not working at all. I think it is unable to evaluate IPForm.DateOfLoss{{$index}}.$invalid.
Alternatively, you can use the ng-form directive to handle your form validation which is a cleaner solution.
e.g.
<tr ng-repeat="ClaimData in ClaimInfo" ng-form="subForm">
<td>
<div ng-class="{ 'has-error' : subForm.DateOfLoss.$invalid }">
<input type="text" id ="DateOfLoss{{$index}}" name="DateOfLoss" class="datefield form-control" ng-model="DateOfLoss"
required />
<span ng-if="subForm.DateOfLoss.$invalid" class="help-block">Please enter Date of
Loss.</span>
</div>
</td>
</tr>
I have a view with some inputs in a table row. Is there a way to check if the whole model is valid without using form (can't have form in tr ) ?
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" required="required" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.x" required="required" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.y" required="required" ng-minlength="3">
</td>
<td>
<button ng-click="save(someModel)">Save</button>
</td>
</tr>
In controller i want to have something like this
function ($rootScope, $scope, serive) {
$scope.save = function (someModel) {
if (someModel.$valid) {}
};
}
If you use a form and it has a name, it automatically can give you exactly what you required.
<form name="someForm">
<tr ng-controller="SomeCtrl">
<td>
<input type="text" ng-model="someModel.name" data-ng-required="true" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.x" data-ng-required="true" ng-minlength="3">
</td>
<td>
<input type="text" ng-model="someModel.y" data-ng-required="true" ng-minlength="3">
</td>
<td>
<button data-ng-disabled="!someForm.$valid" ng-click="someForm.$valid && Namesave(someModel)">Save</button>
</td>
</tr>
</form>
Otherwise, there is no automagical way to do that. I guess you can write a directive which gives you all your inputs and their validators, parse them, and have a validation on the whole model, but no such thing readily exists, I believe.
Better way to do it:
ng-form name="myForm" can be used to avoid using tag and it should work - plunker.
but using ng-include will make the form unavailable to controller - plunker , explanation. A work around for this issue is to pass the form as parameter to the controller method - plunker