angularjs: form validation within ng-repeat - angularjs

I'm trying to do form validation with Angular. The problem is that my form's inputs are within a ng-reapeat and they have the same name. So if one required field is not filled, the others are also shown as not valid.
To workaround this, I've used an inner ng-form as shown below. But the validation is not triggered.
Any idea what I'm doing wrong ?
<form name="referenceForm" >
<table>
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
<ng-form name="urlForm">
<tr>
<td>
<input name="urlName" type="text" ng-model="ref.reference.urlName" ng-disabled="ref.reference.isScreenDeleted" required />
<span ng-show="urlForm.urlName.$error.required">*</span>
</td>
<td>
<input name="shortName" type="text" ng-model="ref.reference.shortName" ng-disabled="ref.reference.isScreenDeleted" required />
<span ng-show="urlForm.shortName.$error.required">*</span>
</td>
<td>
<a class="btn grid-button grid-edit-row btn-danger" ng-if="!ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-trash-o"></i></a>
<a class="btn grid-button grid-edit-row btn-info" ng-if="ref.reference.isScreenDeleted" ng-click="toggleDelete(ref.reference)"><i class="fa fa-refresh"></i></a>
</td>
</tr>
</ng-form>
</tbody>
</table>
</form>

It is not a good idea to put something in the table that is not inside .
Never know how it will work out.
Place ng-form as an attribute on tag instead.
So you should replace this:
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}">
<ng-form name="urlForm">
With this:
<tbody ng-repeat="ref in vm.references | filter:{type: 'ReferenceUrl'}" ng-form="urlForm">

Related

Display Data On Modal Screen Based On User Selection Using Check Box

"I've displayed 20 records in navigation tab and against each records I've added coloumn for checkbox. My requirement is if user selects records (row) 1, 4, 8 using checkbox and click on "Edit" button on top of Navigation tab then it should display on Modal screen so that user can edit it.
if he/she selects records 5, 8, 6 then records should be display in that particular order.
I google it but couldn't find any related posts.
Below is my HTML code:
<div ng-app="RecordApp" ng-controller="recordcontroller" class="container-fluid">
<div class="input-group">
<ul class="nav nav-tabs">
<li role="menu" class="active"><a href="#" data-toggle="tab" >User Data</a></li>
</ul>
<table class="table">
<thead>
<tr>
<th>
Select
</th>
<th>
Test1
</th>
<th>
Test2
</th>
<th>
Test3
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse ">
<td>
<input type="checkbox" checked="checked" ng-model="record.Selected" ng-change="Checked(record)" />
</td>
<td>{{ record.Test1 }}</td>
<td>{{ record.Test2 }}</td>
<td>{{ record.Test3 }}</td>
</tr>
</tbody>
</table>
</div>
following is my AngularJs code for populating the navigation tab
$http.get(pageBaseUrl + "api/records").success(function (records) {
$scope.Records = records;
$scope.IsLoading = false;
});
Below is the code of Button and Modal screen:
<div class="input-group">
<button type="button" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
</div>
<div id="editRecords" class="modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h2>Edit Data For Selected Records </h2>
</div>
<div class="modal-body">
<table class="table-condensed table-striped">
<thead>
<tr>
<th>Test 1</th>
<th>Test 2</th>
<th>Test 3</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" ng-click="SaveRecords();">Save Records</button>
<button type="button" class="btn btn-default" data-dismiss="modal" ng-click="UnmarkForEdition()">
Cancel
</button>
</div>
</div>
</div>
</div>
Thanks for the code, here is my solution,
JSFiddle Demo
Issues:
First I check if the object contains any selected checkboxes using the code.
$scope.checkCheckbox = function(){
return $filter('filter')($scope.Records, {Selected: true}).length === 0;
}
In the above code, I check the ng-repeat array if there is any object containing the property Selected:true, if there are none, then the length will be zero which using a comparator operator, I return a boolean. This is used by the HTML element button attribute ng-disabled and disables the input.
<button type="button" ng-disabled="checkCheckbox()" data-target="#editRecords" data-toggle="modal" class="btn btn-primary navbar-btn">
<span class="glyphicon glyphicon-floppy-disk"></span>
Edit Multiple Records
</button>
When the edit multiple records, button is clicked, I open the modal, and in the code I have added a simpleng-if` which will show only the inputs where the checkbox is selected!
<tr ng-if="record.Selected" ng-repeat="record in Records | orderBy:SortBy:Reverse">
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
<td><input type="text" class="form-control input-sm" /></td>
</tr>
Let me know if this fixes the issue.

My AngularJS validation does not work. I have added ng-required

My AngularJS validation does not work. I have added ng-required. Please let me know where I am missing
<ng-form id="frmdisbursementScheduleMaintenance">
<div style="padding-bottom: 8px;">
<button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
<button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
</div>
<div>
<table>
<tr>
<td><span class="VNAVLabel">Process Begin Date: </span></td>
<td>
<span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
<span ng-show="(frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted) && frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
Process Begin Date is required
</span>
</td>
</tr>
</table>
</div>
</ng-form>
It shouldn't be id, you should use name attribute instead. Angular will create $scope variable with name frmdisbursementScheduleMaintenance which will contain form information.
<ng-form name="frmdisbursementScheduleMaintenance">
Use 'name' instead of 'id' for the form element.
Also, you do not have to check for (frmdisbursementScheduleMaintenance.processBeginDate.$dirty || submitted) only frmdisbursementScheduleMaintenance.processBeginDate.$error.required would do the job.
<ng-form name="frmdisbursementScheduleMaintenance">
<div style="padding-bottom: 8px;">
<button id="cm-SaveBtn" name="cm-SaveBtn" type="button" ng-click="submitted=true">Save</button>
<button id="cm-RefreshBtn" name="cm-RefreshBtn" type="button">Refresh</button>
</div>
<div>
<table>
<tr>
<td><span class="VNAVLabel">Process Begin Date: </span></td>
<td>
<span><input type="date" name="processBeginDate" ng-model="processBeginDate" required></span>
<span ng-show="frmdisbursementScheduleMaintenance.processBeginDate.$error.required">
Process Begin Date is required
</span>
</td>
</tr>
</table>
</div>
</ng-form>

Smart-table - Setting page from code

I'm using the very good table library Smart-table to display my data.
I am using a custom pagination template. I would however like to be able to set page 1 from the code. I have read up on the st-pipe directive it exposes, but it seems that I would need to re-write the whole filtering/pagination/sorting code myself if I implement that.
I'm after a simple way to programatically set a page from outside of the st-pagination directive that exists in my table's tfoot
<table st-table="displayedCollection" st-safe-src="tags" class="table table-hover">
<tbody>
<tr st-select-row="tag" st-select-mode="single" ng-repeat="tag in displayedCollection" ng-click="click(tag)">
<td>
<span editable-text="tag.name" e-placeholder="enter a display name..." e-name="name" e-form="editableForm" e-required>
{{tag.name}}</span>
</td>
<td>
<span editable-text="tag.path" e-placeholder="enter actual value to be used..." e-name="path" e-form="editableForm" e-required>
{{tag.path}}</span>
</td>
<td>
<form editable-form shown="newItem == tag" onshow="onShow()" name="editableForm" oncancel="oncancel(newItem)" onaftersave="saveForm(tag)">
<!-- EDIT -->
<button type="button" class="btn btn-sm btn-default" ng-click="editableForm.$show()" tooltip="Edit" tooltip-placement="left" ng-hide="editableForm.$visible">
<i class="fa fa-pencil-square-o fa-lg"></i>
</button>
</form>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="1" class="text-left">
<div st-template="app/partials/pagination.html" st-pagination="" st-items-by-page="pager.itemsOnPage"></div>
</td>
<td colspan="1">
<div class="btn-group btn-group-sm pull-right ng-scope">
<button type="button" ng-class="{'active':pager.itemsOnPage==5}" ng-click="pager.itemsOnPage=5" class="btn btn-default">5</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==10}" ng-click="pager.itemsOnPage=10" class="btn btn-default">10</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==20}" ng-click="pager.itemsOnPage=20" class="btn btn-default">20</button>
<button type="button" ng-class="{'active':pager.itemsOnPage==30}" ng-click="pager.itemsOnPage=30" class="btn btn-default">30</button>
</div>
</td>
</tr>
</tfoot>
</table>
I'd like to be able to set page on from the <form> sections onshow directive.
Does anyone know if this is possible? Many thanks.
To set the angular-smart-table page number from code use st-pagination's selectPage() function.
Where your HTML has a paginator element like this:
<div id="pagerId" st-pagination="" st-items-by- ...
You could use code like this in your directive
function setPage(pageNumber)
{
angular
.element( $('#pagerId') )
.isolateScope()
.selectPage(pageNumber);
}
You need to have jQuery installed to use $. I got the idea from the last example on: http://lorenzofox3.github.io/smart-table-website/

Angular table of input and button

I have a table with fields from ng-repeat. I have added two extra field such as a input and a button to each row.
What i want is when i enter some value in input and press button i want to run a function with the value of corresponding input. How do i do that?
My View
<tr ng-click="" ng-repeat='customer in customers | filter:query | orderBy: sort.field : sort.order'>
<td ng-repeat='field in fields'>
{{customer[field]}}
</td>
<td>
<input class="form-control" name="debit" type="text">
</td>
<td>
<button ng-click="genEcs(customer['id'])" class="btn btn-primary btn-sm" >ECS</button>
</td>
</tr>
My controller
$scope.genEcs=function(id){
}
You need to assign a model to your input via ng-model attribute. The model would be defined in the scope of each customer of ng-repeat, because ng-repeat creates child scopes:
So, you could do this:
<tr ng-repeat='customer in customers>
<td>
<input class="form-control" ng-model="customersDebit" name="debit" type="text">
</td>
<td>
<button ng-click="genEcs(customer, customersDebit)">ECS</button>
</td>
</tr>
(I also suggest, for the sake of readability and separation of concerns, to pass the entire customer object to the genEcs function, rather than only the id field. The less your View knows about business logic, the better.)

Error in selecting many checkboxes in AngularJS

I have created a table from 2 different arrays in AngularJS that contain employees name and services and rest of the cells contain Checkboxes now I want get the ID's of selected Checkboxes that I have created another array in the controller,
but the view allows me to select only one Checkbox from many in the row
here is my Html
<form ng-submit="save()">
<table border="1">
<tr>
<td><strong>Services</strong></td>
<td ng-repeat="e in PBA">{{e.Name}}</td>
</td>
<tr ng-repeat="(index,i) in SOB">
<td>{{i.Name}}</td>
<td ng-repeat="e in PBA track by $index">
<input type="checkbox" name="cb" ng-true-value="{{e.Id}}_{{i.Id}}" ng-model="ids[index]" />
</td>
</tr>
</table>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" />
</div>
</form>

Resources