Checkbox in table to select table row in Angular - html

I have a table in Angular 6, it has a checkbox in there? What I want to be able to do is select the table row, i.e checkbox, then hit a select button and that gets submitted. I was wondering does the table have to be wrapped in a <form>. The structure of my HTML so far is but it does not work:
<form [formGroup]="assetForm" (ngSubmit)="onSubmit()">
<table class="table table-striped table-hover mb-10">
<thead>
<tr>
<th>Number</th>
<th>Sev</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let incident of data">
<td>
<label class="form-radio">
<input type="radio" name="id_number" value="id_number">
<i class="form-icon"></i>{{incident.number}}
</label></td>
<td>{{incident.sev}}</td>
<td>{{incident.phone}}</td>
</tr>
</tbody>
</table>
<button class="btn btn-primary" [disabled]="!Form.valid" type="submit">Select</button>
</form>
Ts.file
onSubmit() {
if (this.assetForm.invalid) {
this.assetForm.setErrors({ ...this.assetForm.errors, 'required': true });
return;
}
this.uploading = true;
this.service.post(this.assetForm.value).subscribe((response: any) => {
console.log(response);//On success response
}, (errorResponse: any) => {
console.log(errorResponse); //On unsuccessful response
this.error = true;
this.uploading = false;
});
}

<tr *ngFor="let incident of data">
<td>
<label class="form-radio">
<input type="radio" name="id_number" value="id_number" [(ngModel)]="incident.checked">
<i class="form-icon"></i>{{incident.number}}
</label>
</td>
<td>{{incident.sev}}</td>
<td>{{incident.phone}}</td>
</tr>
Try like, hope it will work.

Related

Create a show all button to show hidden row

My code is like this: when you check the 'hide' column, the whole row is hidden. I also have a 'Show All' checkbox. When I check it, all rows (including the hidden ones) are shown. But when I uncheck it, all rows disappear. How can I make it so only the hidden rows disappear when I uncheck 'Show All', and the other rows still remain visible?
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall" ng-hide="hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>
<script>
var app = angular.module("myApp", []);
app.controller('myController', function ($scope, $window) {
$scope.fruitnameDetail = [
{
"fruitname": "Banana"
},
{
"fruitname": "Mango"
},
{
"fruitname": "Orange"
}
];
$scope.addnew = function () {
var fruitnameDetail = {
fruitname: $scope.mdfruitname
};
$scope.fruitnameDetail.push(fruitnameDetail);
$scope.mdfruitname = '';
};
$scope.removefruitname = function (index) {
var name = $scope.fruitnameDetail[index].fruitname;
if ($window.confirm("Do you want to delete " + name + " ?")) {
$scope.fruitnameDetail.splice(index, 1);
}
};
});
</script>
Do not use ng-show and ng-hide at the same time. Just change a little bit your condition for ng-repeat. Here the example that should work:
<body ng-app="myApp" ng-controller="myController">
<h1>Fruits in Vietnam</h1>
<hr>
<form name="myForm">
<div class="input-group input-group-lg">
<input type="text" class="form-control" name="mdfruitname" id="txtfruitname" ng-model="mdfruitname"
required>
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" ng-click="addnew()"
ng-disabled="myForm.mdfruitname.$pristine || myForm.mdfruitname.$invalid">Add
</button>
</div>
</div>
</form>
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Description</th>
<th>Hide</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="fruit in fruitnameDetail" ng-show="showall || !hidef">
<td>{{fruit.fruitname}}</td>
<td><input type="checkbox" ng-model="hidef"></td>
<td>
<a class="btn btn-xs delete-record" ng-click="removefruitname($index)">
<i class="glyphicon glyphicon-trash"></i>
</a>
</td>
</tr>
</tbody>
</table>
<div><input type="checkbox" ng-model="showall"><span>SHOW ALL</span></div>
</body>

Change input format in dynamic table: dropdown, number, date

I'm working on dynamic 3 column table that has 3 input text type : Product, quantity and date
This works good but i want to change type format:
Product column => Dropdown type
Quantity column => number type
Date column => Date type (dd-mm-yyyy)
How i do change it?
Thank you
Original source: link
Code online: https://jsfiddle.net/bvotcode/r61ptxe9/7/
HTML
<body>
<div id="wrapper">
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1>
<tr>
<th>Product</th>
<th>Quantity</th>
<th>Date</th>
</tr>
<tr id="row1">
<td id="product_row1">Car</td>
<td id="quantity_row1">10</td>
<td id="date_row1">20/12/2021</td>
<td>
<input type="button" id="edit_button1" value="Edit" class="edit" onclick="edit_row('1')">
<input type="button" id="save_button1" value="Save" class="save" onclick="save_row('1')">
<input type="button" value="Delete" class="delete" onclick="delete_row('1')">
</td>
</tr>
<tr id="row2">
<td id="product_row2">Book</td>
<td id="quantity_row2">22</td>
<td id="date_row2">26</td>
<td>
<input type="button" id="edit_button2" value="Edit" class="edit" onclick="edit_row('2')">
<input type="button" id="save_button2" value="Save" class="save" onclick="save_row('2')">
<input type="button" value="Delete" class="delete" onclick="delete_row('2')">
</td>
</tr>
<tr id="row3">
<td id="product_row3">Laptop</td>
<td id="quantity_row3">44</td>
<td id="date_row3">19/01/2022</td>
<td>
<input type="button" id="edit_button3" value="Edit" class="edit" onclick="edit_row('3')">
<input type="button" id="save_button3" value="Save" class="save" onclick="save_row('3')">
<input type="button" value="Delete" class="delete" onclick="delete_row('3')">
</td>
</tr>
<tr>
<td><input type="text" id="new_product"></td>
<td><input type="text" id="new_quantity"></td>
<td><input type="text" id="new_date"></td>
<td><input type="button" class="add" onclick="add_row();" value="Add Row"></td>
</tr>
</table>
</div>
</body>
</html>
</body>
CSS
.pt-3-half { padding-top: 1.4rem; }
Javascript
function edit_row(no)
{
document.getElementById("edit_button"+no).style.display="none";
document.getElementById("save_button"+no).style.display="block";
var product=document.getElementById("product_row"+no);
var quantity=document.getElementById("quantity_row"+no);
var date=document.getElementById("date_row"+no);
var product_data=product.innerHTML;
var quantity_data=quantity.innerHTML;
var date_data=date.innerHTML;
product.innerHTML="<input type='text' id='product_text"+no+"' value='"+product_data+"'>";
quantity.innerHTML="<input type='text' id='quantity_text"+no+"' value='"+quantity_data+"'>";
date.innerHTML="<input type='text' id='date_text"+no+"' value='"+date_data+"'>";
}
function save_row(no)
{
var product_val=document.getElementById("product_text"+no).value;
var quantity_val=document.getElementById("quantity_text"+no).value;
var date_val=document.getElementById("date_text"+no).value;
document.getElementById("product_row"+no).innerHTML=product_val;
document.getElementById("quantity_row"+no).innerHTML=quantity_val;
document.getElementById("date_row"+no).innerHTML=date_val;
document.getElementById("edit_button"+no).style.display="block";
document.getElementById("save_button"+no).style.display="none";
}
function delete_row(no)
{
document.getElementById("row"+no+"").outerHTML="";
}
function add_row()
{
var new_product=document.getElementById("new_product").value;
var new_quantity=document.getElementById("new_quantity").value;
var new_date=document.getElementById("new_date").value;
var table=document.getElementById("data_table");
var table_len=(table.rows.length)-1;
var row = table.insertRow(table_len).outerHTML="<tr id='row"+table_len+"'><td id='product_row"+table_len+"'>"+new_product+"</td><td id='quantity_row"+table_len+"'>"+new_quantity+"</td><td id='date_row"+table_len+"'>"+new_date+"</td><td><input type='button' id='edit_button"+table_len+"' value='Edit' class='edit' onclick='edit_row("+table_len+")'> <input type='button' id='save_button"+table_len+"' value='Save' class='save' onclick='save_row("+table_len+")'> <input type='button' value='Delete' class='delete' onclick='delete_row("+table_len+")'></td></tr>";
document.getElementById("new_product").value="";
document.getElementById("new_quantity").value="";
document.getElementById("new_date").value="";
}
You're using the type="text" for all of the <input> tags. You should consider changing the type of the inputs in your edit_row function.
For numbers, the type of input should be number;
For dates, date;
And finally, to render a dropdown box, the best solution is to use a <select> tag instead of an <input>. Don't forget to write all the options of your dropdown inside of <option> tags (which should be all inside of one <select> tag); Here you can find a simple explanation on how to use the <select> tag.

How to connect two inputs in the same form

I'm doing a form that have a multiple checklist, the user can select whatever they want and they neet to put a date, I already configured the checklist but, How can I connect the input date to the input checkbox because they need to be related to.
Soo my final result should be like:
results [{ 'Tramit1', 'date1' }, { 'Tramit2', 'date2' }];
Here's my current code of the part I'm talking about (because the form is bigger):
<table class="table table-bordered">
<thead>
<tr>
<th> # </th>
<th>Tràmit</th>
<th>Validesa de l'autorització</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let permiso of permisos">
<td id="first">
<div class="form-check form-check-aj">
<label class="form-check-label">
<input (change)="onChange(permiso.nom, $event.target.checked)" type="checkbox" class="form-check-input">
<i class="input-helper"></i></label>
</div>
</td>
<td id="first">{{permiso.nom}}</td>
<td>
<div id="datepicker-popup" class="input-group date datepicker">
<input type="date" id="datePicker{{permiso.id}}" name="bday" />
<span class="input-group-addon input-group-append border-left">
<span class="mdi mdi-calendar input-group-text"></span>
</span>
</div>
</td>
</tr>
</tbody>
</table>

Dynamic row add/delete in Thymeleaf

I have implemented dynamic row add/delete in thymeleaf using jquery. But I am unable to capture the row values as array of json objects.
$(function(){
$('#addMore').on('click', function() {
var data = $("#tab_logic tr:eq(1)").clone(true).appendTo("#tab_logic");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
}
});
The table to which dynamic row gets added/deleted is as below:-
<table class="table table-bordered table-hover" id="tab_logic">
<tr class="tr-header">
<label for="requestno">Sales target</label>
<th>Team lead</th>
<th>Sales volume</th>
<th><a href="javascript:void(0);"
style="font-size: 18px;" id="addMore"> <span
class="glyphicon glyphicon-plus"></span></a></th>
</tr>
<tr>
<td>
<input type="text" name="teamLead" class="form-control" ></input>
</td>
<td>
<input type="text" name="salesVolume" class="form-control" ></input>
</td>
<td>
<a href='javascript:void(0);' class='remove'><span
class='glyphicon glyphicon-remove'></span></a>
</td>
</tr>
</table>
You can serialized forms inputs using the serialize() function. This will return a query string that then can be converted to JSON object using JSON.stringify(). So, my recommendation, would be to add everything inside a form and then serialize it.
HTML
<table class="table table-bordered table-hover" id="tab_logic">
<tr class="tr-header">
<label for="requestno">Sales target</label>
<th>Team lead</th>
<th>Sales volume</th>
<th><a href="javascript:void(0);"
style="font-size: 18px;" id="addMore"> <span
class="glyphicon glyphicon-plus"></span></a></th>
</tr>
<form id="myForm>
<tr>
<td>
<input type="text" name="teamLead" class="form-control" ></input>
</td>
<td>
<input type="text" name="salesVolume" class="form-control" ></input>
</td>
<td>
<a href='javascript:void(0);' class='remove'><span
class='glyphicon glyphicon-remove'></span></a>
</td>
</tr>
</form>
</table>
Javascript/jQuery
$(function(){
$('#addMore').on('click', function() {
// Add the row to your form, not the table.
var data = $("#tab_logic tr:eq(1)").clone(true).appendTo("#myForm");
data.find("input").val('');
});
$(document).on('click', '.remove', function() {
var trIndex = $(this).closest("tr").index();
if(trIndex>1) {
$(this).closest("tr").remove();
}
});
// Method that will generate the JSON object.
function toJSON() {
var data = $('#myForm').serialize();
console.log(JSON.stringify(data));
}

Angularjs - unable to push children items dynamically

I have a simple nested json embedded in my html file to which I want to insert some data dynamically using form.
I am able to insert data to parent level but unable to insert to child level. What I am doing wrong?
Here is the code:
<div class="container" ng-app="myApp" ng-controller="myCtrl">
<label>Enter Data</label>
<input ng-model="name" type="text">
<input ng-model="rollno" type="number">
<input ng-model="id" type="text">
<button ng-click="addData(data)">Enter Data</button>
<table class="table table-bordered">
<tr>
<th>Sr No</th>
<th>Name</th>
<th>Roll No</th>
<th>Subjects</th>
<th>Delete</th>
</tr>
<tr ng-repeat="data in myData">
<td>{{$index+1}}</td>
<td>{{data.name}}</td>
<td>{{data.rollno}}</td>
<td ng-repeat="subject in data.subjects">{{subject.id1}}, {{subject.id2}}</td>
<td>remove</td>
</tr>
</table>
</div>
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl',function($scope){
$scope.myData =[{"name":"Jon","rollno":123,"subjects":[{"id1":"Maths","id2":"Hindi"}]},{"name":"Ron","rollno":234,"subjects":[{"id1":"English","id2":"Hindi"}]}];
$scope.addData = function(data){
$scope.myData.push({name:$scope.name,rollno:$scope.rollno,id1:$scope.id1});
}
$scope.removeData = function(index){
$scope.myData.splice(index, 1);
}
});
</script>
If you are trying to insert subjects as well using addData function you can do the below. In html add those ng-models
<input ng-model="name" type="text">
<input ng-model="rollno" type="number">
<input ng-model="id" type="text">
<input ng-model="subid1" type="text"/>
<input ng-model="subid2" type="text"/>
In js
$scope.addData = function(data){
var arrData = {name:$scope.name,rollno:$scope.rollno,subjects:[{id1:$scope.subid1,id2:$scope.subid2 }]};
$scope.myData.push(arrData);
}