I want to make validations on table rows , I am doing in the following way but its not working.
I want to apply it on click of save button at lst.
I have 5 columns and want to apply validation for each column Suppose if any field is empty I want to disable the button.
Can anybody help?
<div class="mainDiv" ng-if="currentForm != ''">
<table class="mappingTable">
<tr>
<th>#</th>
<th>CommCare Question</th>
<th>Data Element</th>
<th>Category Option Combo</th>
<th>Frequency/Period</th>
<th>Facility Identifier</th>
</tr>
<tr ng-repeat="mappingElement in formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements">
<td class="serialNoCell">{{$index+1}}.</td>
<td title="{{mappingElement.commcareQuestion}}" class="commcareQuestion">{{mappingElement.commcareQuestionDescription}}</td>
<td class="dhisDe"> <input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.dataElement"
ng-class="{ error: !mappingElement.dataElement }"
placeholder="{{'please_select_data_element'}}"
uib-typeahead="dataElement as dataElement.name for dataElement in dataElements | filter:$viewValue | limitTo:20"
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
ng-blur="updateCategoryCombo(this.mappingElement)"
/></td>
<td class="dhisCC"><input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.categoryCombo"
ng-class="{ error: !mappingElement.categoryCombo }"
placeholder="{{'please_select_categorycombo'}}"
uib-typeahead="categoryComboOption as categoryComboOption.name for categoryComboOption in categoryComboInputHolder[currentForm.unique_id+mappingElement.commcareQuestion] | filter:$viewValue "
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
/></td>
<td class="dhisPeriod"><input type="text"
name="foo"
class="form-control"
ng-model="mappingElement.period"
ng-class="{ error: !mappingElement.period }"
placeholder="{{'please_select_period'}}"
uib-typeahead="period as period.name for period in periods | filter:$viewValue | limitTo:20"
uib-typeahead-focus-first="false"
uib-typeahead-editable=false
/></td>
<td class="dhisOuIdentifier"><input type="checkbox" ng-model="commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]" ng-click="doOrgUnitUIOperations(this);" ng-disabled="!commcareQuestionToOrgUnitIdentifierMap[currentForm.unique_id+mappingElement.commcareQuestion]&&formIdToIsOrgUnitIdentifierPresentMap[currentForm.unique_id]"></td>
</tr>
</table>
<div>
<button type="button" ng-disabled="!mappingElement.categoryCombo || !mappingElement.dataElement || !mappingElement.period" ng-click="saveMetadataMapping()">{{'Save'}}</button>
</div>
</div>
One thing that could be wrong here is that the button is outside of the ng-repeat's scope. So it doesn't know about mappingElement.
If you want validation on each row separately add the button inside a column,
otherwise you can create a function in the controller to iterate the formIdMetadataMappingToObjectMap[currentForm.unique_id].mappingElements collection and search for empty values, then you can simply add it to the button ng-disabled="validationFunc()".
Related
I am trying to use ng-show="emp" with a checkbox bind it with ng-model inside a list but it is not working properly. Do you have any idea how it works?
HTML
<fieldset id="field4">
<table>
<tr>
<td><input type="checkbox" ng-model="all" ng-click="selectall(all)" ng-disabled="self" /><label>Select All</label> </td>
<!--<td><input type="checkbox" ng-model="clear" ng-click="clearall(clear)" ng-disabled="self" /> Clear all</td>-->
<td><input type="checkbox" ng-model="self" ng-show="emp" /><label ng-show="emp">Self Service</label> </td>
</tr>
</table>
</fieldset>
<br />
<div class="wrapper">
<fieldset id="field2">
<table>
<tr ng-repeat="e in empdepts | filter : dept | filter : code | filter : emp | groupBy:'dep_LDesc' ">
<td>
<label ng-click="showContent = !showContent"></label>
<details ng-open="showContent">
<summary>{{e[0].dep_LDesc}}</summary>
<ul ng-repeat="employee in e ">
<li ng-model="emp" ng-class="{'selected1':employee == selectedRow1}" ng-click="setClickedRow1(employee)"> {{employee.Sname}}</li>
</ul>
</details>
</td>
</tr>
</table>
</fieldset>
If the ng-model of the checkbox is binded to the scope variable "all" (ng-model="all"), why don't you do this?
<input type="checkbox" ng-model="self" ng-show="all" />
On the other hand, when something like this doesn't work, use a label/span to render the actual value of the variable you are using so you can easily see the actual value.
I have the following sample model:
{
a:{
x:0,
z:0,
f:1
},
b:{
x:"a",
u:"b"
}
}
Which I render into two different tables
<div class="col-sm-5">
<h1>A</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.a">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
<div class="col-sm-5 col-md-offset-2">
<h1>B</h1>
<table>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
<tr ng-repeat="(key,value) in schema.b">
<td>
<input type="text" ng-model="key" required>
</td>
<td>
<input type="text" ng-model="value" required>
</td>
<td></td>
</tr>
</table>
</div>
The tables are dynamic, which means I can add new rows to it.
Now when I change any values inside the table, they aren´t synchronized with the model -> Editing not possible
What do I need to do to store changes automatically in the original
model?
If this is not possible, how can I get a Json Schema from my table
like the one the tables are rendered from, so that I only have to
overwrite the old one?
First off you can't dynamically change an object property name or key. So what you are trying to do with ng-model="key" simply won't work.
As far as the value part you should be using the object reference in your ng-model
<tr ng-repeat="(key,value) in schema.b">
<td>{{key}}</td>
<td>
<input type="text" ng-model="schema.b[key]" required>
</td>
<td></td>
</tr>
if you need to be able to edit the key then you need to change your data structure to an array of objects with each object having the same property names for keys
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.)
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">
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>