I have reactive forms that takes values form #Input.
All values are seen in Html but I want to change the value's format in <input matInput
In my example I have date that I want to have in specific format. With #Input data I am doing it in a way:
{{Inputdata.date| date: "dd.MM.y"}}
But in case I have elements in my Reactive Form:
<tr>
<td>
Date
</td>
<td>
<mat-form-field color="warn">
<input matInput type="text" class="form-control" formControlName="date">
</mat-form-field>
</td>
</tr>
This is an example of date format but I would also like to have possibility to use select option too.
Is it possible?
I used datePicker. It solved my problem.
Related
How can I access a list variable contained inside the object in HTML using Thymleaf
Eg :All the aClient properties are String objects.They can be accessed as
<tr th:each="aClient : ${clientList}">
<td th:text="${aClient.firstName}"/>
<td th:text="${aClient.lastName}"/>
<td th:text="${aClient.address}"/>
<td th:text="${aClient.clientType}"/>
But for property like
List<Service> services.
How can I access it?
Tried doing below after some reading. But it did not pick up the names of services.
<div th:each="service, serv : *{services}">
<input type="text" th:field="*{service[__${serv.index}__].name}" />
</div>
"name" is the property in Service class with getters and setters.
The contents of an input field are identified by the value attribute.
Also, you don't need to use the Thymeleaf serv iterator tracker, since in this case, you are already iterating each Service object - and you just want to get the value of each object's name field.
This can all be simplified to the following:
<div th:each="service : ${services}">
<input type="text" th:value="${service.name}" />
</div>
(It's basically the same approach as you used for your th:text data.)
The generated HTML is as follows:
<div>
<input type="text" value="service 1 name">
</div>
<div>
<input type="text" value="service 2 name">
</div>
This assumes you want each input field in its own div.
Needed to insert the serivce names in the column.This is achieved by
<td>
<div th:each="service : ${aClient.services}" th:text="${service.name}"></div>
</td>
I am trying to get all the payments that is been selected through the checkboxes and then update the value in the database by '1' which means its paid. But when I try to get the values of checkbox array I only get 1 data in the array and not all selected. Any help?
View
#foreach($sellerID as $p)
<form action="/paid/{{$p->id}}" method="post" enctype="multipart/form-data">
#csrf
<td><input type="checkbox" name="checked[]" value="{{ $p->id }}"></td>
<td> {{$p->order_number}} </td>
<td>
<input id="commission" type="text" class="form-control" name="commission"
value="{{ $p->commission_value }}" readonly autocomplete="notes" style="width: 15%;" autofocus>
</td>
<td> {{$p->product_name}} </td>
<td>
#if($p->sellet_commission_paid == '0')
<button type="submit" class="btn btn-default" style="background-color:red">
<b><em>UNPAID</b></em>
</button>
#else
<b><em>PAID</b></em>
#endif
<td>
</form>
#endforeach
Controller
$checked = $request->input('checked');
// $checkboxes = $request->checked;
dd($checked);
die();
// dd(checkboxes);
you can put almost anything you like inside a form, but not inside a table. table has a more restricted structure which you must follow.
instead of wrapping table rows with forms, you can wrap the whole table with 1 form and submit all of it and just extract the details you need,
You need to put all input element inside form :
<form action="/route">
<input ...../>
<div>
<input ...../>
</div>
</form>
A form-associated element is, by default, associated with its ancestor form element, but may have a form attribute specified to override this.
If a form-associated element has a form attribute specified, then that attribute's value must be the ID of a form element in the element's owner Document.
Try using a foreach loop.
foreach($request->input('checked') as $check){
[sample variable] = $check;
}
The array will now be stored as $check and you should be able to get each value from the input
I have a tag h:selectManyCheckbox, in it a loop over a list. for each item in the list I need a checkbox. Unfortunately the format of the checkbox + label does not correspond to the table which jsf creates. I need a div around each item, like this:
<div class="form_control var_checkbox">custom
<input type="checkbox" class="checkbox" name="service" id="service_0" data-product="additional_price" data-product-add-price="100.0">
<label class="label" for="service_0">title</label>
<span class="guarantee_price">CHF 100.0</span>
</div>
but jsf renders it like this:
<table>
<tbody>
<tr>
<td><input id="addToCart:j_id_29_2:0" type="checkbox" name="addToCart:j_id_29_2" value="0"><label for="addToCart:j_id_29_2:0"> title</label></td>
<td><input id="addToCart:j_id_29_2:1" type="checkbox" name="addToCart:j_id_29_2" value="1"><label for="addToCart:j_id_29_2:1"> titel2</label></td>
</tr>
</tbody>
</table>
here's the code currently generating it:
<h:selectManyCheckbox value="${addToCartBean.selectedServicesIndexes}">
<c:forEach items="#{productServicesJSFBean.productServicePlusBeanKeySet}" var="productServicePlusKey">
<c:forEach items="#{productServicesJSFBean.productServicePlusBeans[productServicePlusKey]}" var="productServicePlus">
<div class="form_control var_checkbox">
<f:selectItem itemValue="${counter}" itemLabel="${productServicePlus.servicePlusDisplay.title}" >custom </f:selectItem>
</div>
<c:set var="counter" value="${counter + 1}"/>
</c:forEach>
</c:forEach>
</h:selectManyCheckbox>
I tried creating the checkbox by hand, but jsf doesnt pick it up. We can not use a table, it has to be in the div format. How can I change how jsf renders those selectItems. I dont want it globally, only for those here. How can I do that?
someone I sent this question to sent me this SO question, which I didnt find through google: Render selectManyCheckbox without HTML table . got it working with <h:outputLabel><h:selectBooleanCheckbox>
Hi i have spring application which shows some values from the database in a table from jsp.
Now i want to add functionality that when a user clicks on one row to know which row he has clicked to delete or edit row
How is that to be accomplished.
When you compile jsp page you can assign an id to every row. Put this id inside hidden and send it back on delete or update action.
<tr>
<td>
<form name="myform" action="..." method="...">
<input type="hidden" name="Language" value="rowNumber">
<input type="submit" value="Delete">
<br><br>
</div>
<td>
</tr>
I have a table where I need to find if the checkbox corresponding to a cell is checked or not, see for example, I need to find out if the checkbox id=830 which is a sibling of DeviceHelp is checked or not.
Similarly for element Contact, I will have to check whether checkbox id="72" is checked / unchecked
And I can only rely on the text elements (contact, DeviceHelp, etc) to get the checkboxes state and not the checkbox ids which could change.
<tr class="row active" style="display: table-row;">
<td>
<input id="72" class="rowcheck" type="checkbox" value="true" name="ModesForUi[0].Allow" categoryid="58" disabled="">
<input type="hidden" value="false" name="ModesForUi[0].Allow">
</td>
<td> Administration - Read </td>
<td>
Contact
<input id="ModesForUi_0__ResourceID" type="hidden" value="72" name="ModesForUi[0].ResourceID">
<input id="ModesForUi_0__ModeID" type="hidden" value="12185" name="ModesForUi[0].ModeID">
</td>
<td> Controls access to Search Contacts link and to view contact details page. Navigate to Menu\Advanced\More </td>
</tr>
<tr class="row active" style="display: table-row;">
<td>
<input id="830" class="rowcheck" type="checkbox" value="true" name="ModesForUi[1].Allow" categoryid="58" disabled="">
<input type="hidden" value="false" name="ModesForUi[1].Allow">
</td>
<td> Administration - Read </td>
<td>
DeviceHelp
<input id="ModesForUi_1__ResourceID" type="hidden" value="830" name="ModesForUi[1].ResourceID">
<input id="ModesForUi_1__ModeID" type="hidden" value="12186" name="ModesForUi[1].ModeID">
</td>
<td> Controls access to Help icon displayed next to logout icon and next to the menu. </td>
</tr>
Have tried the following, but I am not getting the checkbox value
"ancestor::td[1]/input[1]/preceding-sibling::td[normalize-space(text())='DeviceHelp']")
And
//tr[position()>1]/td[normalize-space(text())='DeviceHelp*']/parent::td/preceding-sibling::td/input#value
Please xpath experts could you shine some light on what is wrong with the paths above and how to get to the checkbox ?
Thanks!
I think I know what you're trying to get here...
Try this for Device Help:
/root/tr/td[normalize-space(text())='DeviceHelp']/../td[1]/input[1]/#value
And this for Contact:
/root/tr/td[normalize-space(text())='Contact']/../td[1]/input[1]/#value
"root" is just whatever node you're starting from, I added that to test locally, as the XML snippet isn't complete.
EDIT
Try this:
//tr/td[normalize-space(text())='DeviceHelp']/../td[1]/input[1]/#value
//tr/td[normalize-space(text())='Contact']/../td[1]/input[1]/#value