Angular :ng-form is getting undefined when view Changed - javascript

I did some validation check in my dropdown selection when I delete a row. After saving the value I am redirecting to another view. Again when I am trying to delete a row then form is showing undefined. What am I doing wrong?
my jsp-
<div class="form-group" ng-show="editMode!=''">
<label for="editProductJobFileConfig" class="col-md-2 control-label">Job File Configuration</label>
<div ng-class="{'col-sm-9':editMode!=''}" class="col-md-10">
<table class="table table-bordered table-striped table-hover table-condensed">
<thead>
<th>Job File Type</th>
<th>Job File Name</th>
<th></th>
</thead>
<tbody>
<tr ng-repeat="object in editProductJobFileConfig track by $index" novalidate ng-form="jobfileForm">
<td>
<select class="form-control" ng-model="object.key" required ng-change="reValidateJobFileKey(editProductJobFileConfig)" name="jobFileKey" ng-init="object.form = jobfileForm">
<option style="display:none" value=""></option>
<option value="some1">some1</option>
<option value="some2">some2</option>
<option value="some3">some1</option>
<option value="some4">some4</option>
<option value="some5">some5</option>
</select>
</td>
<td>
<input type="text" class="form-control" name="jobFileName" ng-model="object.value" required/>
</td>
<td>
<button class="btn btn-danger btn-sm" data-style="zoom-in" ng-click="deleteFieldMappingDefaults(editProductJobFileConfig,$index)>
<span class="glyphicon glyphicon-remove"></span>
</button>
</td>
</tr>
<tr>
<td colspan="3">
<button class="btn btn-primary btn-sm" ng-click="editProductJobFileConfig.push({'key':'','value':''})" title="Add Value">
<span class="glyphicon glyphicon-plus"></span> Add Value
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
my controller-
$scope.deleteFieldMappingDefaults = function(editProductJobFileConfig, index) {
angular.forEach(editProductJobFileConfig, function(fieldMapO) {
fieldMapO.form.jobFileKey.$setValidity("duplicate",true);
});
for (var i=editProductJobFileConfig.length-1; i>index; i--) {
editProductJobFileConfig[i].form.jobFileKey = editProductJobFileConfig[i-1].form.jobFileKey;
}
editProductJobFileConfig.splice(index,1);
};
1st time when I delete editProductJobFileConfig holds form and set validity. But once I save my value view is changing, again when I select the same product and try to delete a row it shows form is undefined.

Related

How can I display the td of a table without repeating it several times?

I have a database that has a table. In this table there is the user's name, the user's number, the course, and the level he has taken. When the user takes two courses, the data is repeated twice (name, number) and then the course and its level. I would like to display this database in a table. I would like to have one username and number displaying his two courses in one row of the table.
It is my code:
<table id="bootstrap-data-table-export" class="table table-striped table-bordered">
<thead>
<tr>
<th>Name</th>
<th>M Code</th>
<th>Numbering</th>
<th>Cours Level</th>
<th>Point</th>
<th>Graduation</th>
</tr>
</thead>
<tbody>
<%
var c =[]
//console.log(membre);
for (let i = 0; i < membre.length; i++) {
var element = membre[i];
//console.log("membre[i].username== ", membre[i].username);
for (let j = 0; j < c.length; j++) {
var element1 = c[j];
if (membre[i].username == c[j]) {
console.log("username = ", i,' ', element.username);
console.log("c[j] = ", j,' ', c[j]);
} else { %>
<% }
}
c.push(element.username)
%>
<tr>
<td>
<%= membre[i].username %>
</td>
<td>
<%= membre[i].mcode %>
</td>
<td>
<%= membre[i].num_agent %>
</td>
<td>
<select class="form-control selectPoints">
<option class="text-center" value="1"><%= membre[i].cours %> - niveau</option>
<option class="text-center" value="1">egal egal</option>
</select>
</td>
<td>
<div class="input-group">
<select class="form-control selectPoints">
<option class="text-center" value="1">Cours Name 5pts</option>
<option class="text-center" value="1">Cours Name 5pts</option>
</select>
<button class="btn btn-sm btn-success"><i class="fa fa-plus"></i></button>
<button class="btn btn-sm btn-danger"><i class="fa fa-edit"></i></button>
</div>
</td>
<td>
<div class="input-group">
<select class="form-control">
<option class="text-center" value="1">Bronze Excel</option>
<option class="text-center" value="">Silver Anglais</option>
</select>
<button class="btn btn-sm btn-success"><i class="fa fa-plus"></i></button>
<button class="btn btn-sm btn-danger"><i class="fa fa-edit"></i></button>
</div>
</td>
</tr>
<%
}; %>
</tbody>
</table>

How to clone and append chose dropedown box using jq?

I am trying to replicate some of my fields with chosen dropdown-box to clone and append using jq. Everything is working fine. But it is not replicating chosen dropdown.
HTML -
<div class="form-group row">
<div class="col-md-12">
<table width="100%" cellspacing="15" class="order-table">
<thead>
<tr>
<th width="50%">Product</th>
<th width="50%">Quantity</th>
</tr>
</thead>
<tbody>
<tr class="clone-class">
<td>
<select name="productId[]" class="form-control chosen-select chosen" style="width: 100%;"
data-placeholder="Select">
#foreach($product as $p)
<option value="{{$p->id}}">{{$p->name}}</option>
#endforeach
</select>
</td>
<td>
<input name="quantity[]" type="number" class="form-control" required>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<a class="btn btn-primary add-more-btn float-sm-right">Add</a>
</div>
</div>
Js -
$(document).ready(function(){
var clone = $('.clone-class').clone(true);
console.log(clone);
$('.clone-class select').chosen();
jQuery('.add-more-btn').click(function() {
var parent = jQuery('.clone-class').last();
clone.clone(true).insertAfter(parent);
$('.clone-class:last select').chosen();
});
});
On click of add button it is replicating expected fields but not dropdown as expected.
Thank you for your help in advance.
It might be causing by chosen-select chosen class.
I have tried your code on codepen. Just remove those classes from <select> and add data-live-search="true".
So your code will be -
<div class="form-group row">
<div class="col-md-12">
<table width="100%" cellspacing="15" class="order-table">
<thead>
<tr>
<th width="50%">Product</th>
<th width="50%">Quantity</th>
</tr>
</thead>
<tbody>
<tr class="clone-class">
<td>
<select name="productId[]" class="form-control" style="width: 100%;"
data-placeholder="Select" data-live-search="true">
#foreach($product as $p)
<option value="{{$p->id}}">{{$p->name}}</option>
#endforeach
</select>
</td>
<td>
<input name="quantity[]" type="number" class="form-control" required>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="form-group row">
<div class="col-md-12">
<a class="btn btn-primary add-more-btn float-sm-right">Add</a>
</div>
</div>
And same js code.
Also, check working codepen.

angularjs ng-form and ng-repeat with input validation and submit action

Angular 1.6.2
Try to iterate over elements of collection inputted by user and then check their validity and enable submit action if validation passes.
I try to use ng-form for this purpose and have two approach but each of them has side-effect.
First approach (ng-form at the table level):
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40%>
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach submit is disabled until all input are in set ranges but validation messages don't appear.
Second approach (ng-form at the table column level):
<table class="datatable table table-stripped table-responsive">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column" width=40% ng-form="form">
<input id="proposed-ld-input" name="input"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" data-ng-show="form.input.$error.required">
Message required
</div>
<div class="error" data-ng-show="form.input.$error.max">
Message max
</div>
<div class="error" data-ng-show="form.input.$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
In this approach validation messages appear but submit button is always enabled.
Could you tell me what I did wrong?
Give the inputs different names:
<table class="datatable table table-stripped table-responsive" ng-form="form">
<thead>
<tr class="headers">
<th ng-repeat="header in ctrl.headers">{{header}}</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="linkDelay in ctrl.currentLinkDelays">
<td>{{linkDelay.label}}</td>
<td>{{linkDelay.value}}</td>
<td id="proposed-ld-input-column{{$index}}" width=40%>
̶<̶i̶n̶p̶u̶t̶ ̶i̶d̶=̶"̶p̶r̶o̶p̶o̶s̶e̶d̶-̶l̶d̶-̶i̶n̶p̶u̶t̶"̶ ̶n̶a̶m̶e̶=̶"̶i̶n̶p̶u̶t̶"̶
<input id="proposed-ld-input{{$index}}" name="input{{$index}}"
class="form-control ng-invalid-min ng-invalid-max ng-invalid-required"
type="number" ng-model="ctrl.inputs[linkDelay.property]"
data-ng-required="true" min="0" max="180"/>
<div class="error" ng-show="form['input'+$index].$error.required">
Message required
</div>
<div class="error" ng-show="form['input'+$index].$error.max">
Message max
</div>
<div class="error" ng-show="form['input'+$index].$error.min">
Message min
</div>
</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" type="submit" ng-disabled="form.$invalid"
ng-click="ctrl.applyChanges()">
<span>Apply</span>
</button>
The ng-repeat creates multiple inputs. They need to be assigned different names for the error messages to be correct.

Jquery time picker & Date picker in table with add row

Jquery time picker & Date picker in the table with add row.
jQuery Clone with date picker and time picker & unique id.
In this demo, I can't be showing date picker after editing any row from
cloned textbox please help where I had put the wrong code.
<div class="container">//div start
<div class="table-wrapper">
<div class="table-title">
<div class="row">
<div class="col-sm-8"><h2>Add Place Details</h2></div>
<div class="col-sm-4">
<button type="button" id = "btn" class="btn btn-info add-field"><i class="fa fa-plus"></i> Add New</button>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Vehicle</th>
<th>Actions</th>
</tr>
</thead>
<tbody class = "multi-fields" id="elements">
<tr class = "multi-field" id="Meal_00">
<td>
<div class="content datepicker"><input type="text" id="Field_00" class = "datepicker_recurring_start"></div>
</td>
<td><div class="bootstrap-timepicker"><input type="text" id="Field_00" class="form-control timepicker"></div></td>
<td><select class="vehicle form-control"><option value = "vehicle1">vehicle1</option><option value = "vehicle2">vehicle2</option><option value = "vehicle3">vehicle3</option></select></td>
<td><a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a>
<a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
</div>//div end

Angularjs simple grid Table sort by last week

I want a button on-click I want to sort table with last week dates in angularjs. If this is my Angular view page.
<div class="form-inline has-feedback filter-header">
<input type="text" class="form-control" placeholder="Search" ng-model="search.$" />
<!-- <i class="glyphicon glyphicon-search form-control-feedback"></i> -->
<button class="btn btn-default btn-sm" ng-click="hideFilter=!hideFilter">Advanced Search</button>
</div>
<a class="btn btn-default btn-sm pull-right" href="/#/add">Add New</a>
</div> <!-- Grid filter ends -->
<table class="table table-striped table-condensed table-responsive table-hover">
<thead class="data-grid-header">
<!-- table header -->
<tr>
<th>
<span class="fa fa-th-large"></span>
Title
</th>
<th class="hidden-xs">
<span class="fa fa-calendar"></span>
Schedule Date
</th>
</tr>
<!-- table filter -->
<tr ng-hide="hideFilter">
<th><span ng-hide="hideFilter"><input type="text" ng-model="search.title"></span></th>
</tr>
</thead>
<tbody class="data-grid-data">
<tr ng-repeat="visit in visitsList | filter: dateRange | filter: search |orderBy:orderByField:reverseSort">
<td>{{visit.title}}</td>
<td>{{visit.startDate | date:medium}}
</tr>
</tbody>
</table>
dont know how to fill controller to sort last week .
do help thanks in advance

Categories