I'm trying to load a form with an object that has a enum property, seems that everything is working correctly, but when I try to apply a class I get an error. I can see in the HTML code that checked property is been apply correctly, however I need to apply an specific class to the checked element and in the following line is the one that I have the problem.
th:classappend="${'__${currency}__' == '__${reference.currency}__' ? 'active'}"
The complete element looks like this
<div class="btn-group" data-toggle="buttons">
<label th:each="currency : ${T(entity.CurrencyEnum).values()}"
th:for="${#ids.next('currency')}" class="btn btn-default" th:classappend="${'__${currency}__' == '__${reference.currency}__' ? 'active'}">
<input type="radio" th:name="currency" th:field="*{currency}"
th:text="${currency}" th:value="${currency}" />
</label>
</div>
Thanks in advance...
--- UPDATE ---
Here is a sample code after solving the issue. The problem was where I place the final } please be carefull with this detail.
<div th:fragment="currency (selected)">
<label
th:each="currency : ${T(CurrencyEnum).values()}"
th:for="${#ids.next('currency')}" class="btn btn-default"
th:classappend="${currency == selected} ? 'active'"> <input type="radio"
th:name="currency" th:field="*{currency}" th:text="${currency}" th:value="${currency}" />
</label>
</div>
Assuming that reference is a variable defined somewhere and it is visible in this contex, you can try with this:
th:classappend="${currency} eq ${reference.currency} ? 'active'"
Related
I have an angular 7 reactive form, input field in this form is to let user see and modify time and then using Save() save it back to our db, the problem is that user can enter any none sense numbers in this field which dose not make sense in terms of Time.(like hours should be 1-24, Minutes 1-60)
My question is how can I validate what user entered into time field and if its valid then let Save btn be active?
Note: Based on my testing even though its none sense time entry but while trying to save its not saving to db and its probably sql not letting that happen.
I googled but i could not find anything, also angular has only email Validators which u can put while defining form.
this is my form defination
timeForm: FormGroup = new FormGroup({
Id: new FormControl(''),
Time: new FormControl(''),
});
and this is my HTML side
<form style="background-color: aliceblue;" [formGroup]="service.timeForm">
<mat-grid-list cols="1" rowHeight="120px">
<mat-grid-tile>
<div class="form-controles-container">
<input type="hidden" formControlName="Id" />
<mat-form-field>
<input formControlName="Time" matInput placeholder="Time" />
</mat-form-field>
<div class="button-row">
<button mat-raised-button color="primary" type="submit" (click)="Save()">Save</button>
<button mat-raised-button color="warn" (click)="Cancel()">Cancel</button>
</div>
</div>
</mat-grid-tile>
</mat-grid-list>
</form>
I need some sort of validation when user punch in any input which dose not make sense in Time my Save btn should not be activated.
I appreciate your help and guideline.
You can use the HTML type="time" or if you want more you can simply use a library like: JsDaddy/ngx-mask found on Github. Use it like this:
HTML with MatInput:
<input formControlName="Time" matInput placeholder="Time" type="time" />
With ngx-mas:
<input formControlName="Time" matInput placeholder="Time" mask="Hh:m0" />
Adding type="time" in all input time type use cases always help.
How I can set a checked attribute for an input in my form, using Thymeleaf?
Here is my code, which currently doesn't work:
<label th:each="cat : ${categories}">
<input type="checkbox" value=""
th:value="${cat.id}"
th:text="${cat.description}"
th:checked="${recipe.getCategories().contains(cat) ? true : false}"
/>
</label>
As stated in comments, the problem may be from somewhere else but try this and see if it helps:
th:checked="${recipe.getCategories().contains(cat)}"
About a week ago i posted a question but couldn't get it answer because i didn't know how to use jsfiddle or codepen but i figured it out.
my problem is that the button doesn't work now if you click around it it will display the file search box this is the sample:
https://codepen.io/anon/pen/bWaYzJ
<label> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</label>
now if i detached the plugin from element then button works again.
change your outer label to div seems to solve your problem like this codepen
<div> Uploads
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
</div>
<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">
And make your javascript:
$(document).ready(function(){
$('#exampleFileUpload').onClick({
MultiFile();
});
});
First, remove the reference to the MultiFile source file - that's what causes the "MultiFile is not a function" error. You will need to include the MultiFile directly in the source for the codepen (as you already have).
Second, the label needs to wrap the input, and it cannot use the for attribute (since that relies on the name attribute for the target, which you have not set):
<div> Uploads
<label class="button">Upload File
<input type="file" id="exampleFileUpload" class="show-for-sr" multiple>
</label>
</div>
im trying to get the sqrt symbol to display inside my button. I cant seem to get it to work. Here is my button code
<input type="button" id="sqrt" value="sqrt" onclick="insert function here">
We the value, i need to get the sqrt symbol to show up and I cant seem to figure out how.
If you need to find a specific symbol you can refer to W3's Character Entity Reference Chart.
The Square Root (√) symbol can be displayed using one of the following:
√
√
√
√
For example:
<input type="button" value="√" /> <!-- or... -->
<input type="button" value="√" /> <!-- or... -->
<input type="button" value="√" /> <!-- or... -->
<input type="button" value="√" />
Personally I'd opt for either √ or √ as these directly reference the symbol's Unicode ID. A browser may not necessarily have any mapping defined for √ or √.
JSFiddle demo.
Use √:
<input class="sqrt-input" type="submit" value="√" />
Change the font if you don't like the default look:
/* If find Verdana pretty good for this and it's available
on almost every browser. */
.sqrt-input {
font-family: Verdana;
}
The simplest way is to use the character itself:
<input type="button" id="sqrt" value="√" onclick="...">
You then need to make sure that the character encoding is utf-8 and this is declared in HTTP headers, but you should do that anyway.
Use an img tag inside a button tag like this :-
<button TYPE="submit" >
<img src="" >
</button>
Here put the path of your image in the src attribute. You can also add hieght and width properties to define size for your button and attributes like align="absmiddle" to position image in middle of the button.
for example
<button TYPE="submit" >
<img style="height:25px;width:65px;" src="http://2.bp.blogspot.com/_0agwm6I7YZE/TO_DccbrDBI/AAAAAAAAMEU/0OADo56Xqxw/s1600/square-root.jpg" align="absmiddle" >
</button>
Here is the code what i tried.
<div style="width:85%;">
<input class="formbutt" value="AddNew" title="AddNew" type="button"
style="{(${projectEnvironmentBean.divStyle}=='dipslay:none') ? 'display:block' :'display:none'}" id="addNewId" onclick="addnewFn();">
</div>
In this code i am checking div-style but unable to get expected result.
You Just added wrong parentheses.
Try this:
<input style="${projectEnvironmentBean.divStyle eq 'dipslay:none' ? 'display:block' : 'display:none'}" />