I'm new to thymeleaf and following couple of tutorials to iterate over list and display checkboxes in odd/even fashion. Surprisingly, i'm getting wierd results. Below is code snippet:
<div class="col-sm-6">
<th:block th:each="service,iterStat : ${services}">
<div class="form-check">
<input type="checkbox" class="form-check-input" name="myCheck"/>
<label class="form-check-label" th:text="${'myCheck'+iterStat.index+'_'+iterStat.odd}"></label>
</div>
</th:block>
</div>
indexes 0,2,4 etc prints odd as true and 1,3,5 prints odd as false.
I'm not sure whether im doing correct or not. FYI im using spring-boot version 2.5.2 and thymeleaf version 3.0.12.
Related
What I am trying to do set object user variable attribute based on click.
`
<form class="container" th:action="#{/processSignup}" method="post"
th:object="${user}">
<div class="switch">
<div class="MenteeSignUp" onclick="tab1();" th:onclick="*{}" >Mentee</div>
<div class="MentorSignUp" onclick="tab2();" th:value="MENTOR" th:field="*{userRole}">Mentor</div>
</div>
`
Trying to add different role-based what user click which either mentor or mentee which you can see from the screenshot.
I am kind of new to thyme leaf, so I tried to have th:onClick and then tried to assign it but it didn't work
form
The code you have there doesn't really make sense. <div />s do not have a value attribute, and the expression in a th:onclick must be valid javascript (instead you have a blank selection variable expressions: th:onclick="*{}"). Maybe you're looking for something like this?
<form class="container" th:action="#{/processSignup}" method="post" th:object="${user}">
<input type="hidden" th:field="*{userRole}" id="userRole" />
<div class="switch">
<div class="MenteeSignUp" onclick="document.getElementById('userRole').value = 'MENTEE';">Mentee</div>
<div class="MentorSignUp" onclick="document.getElementById('userRole').value = 'MENTOR';">Mentor</div>
</div>
In my code I can usually find an element by Xpath and perform actions like shown below
await I.fillField('//*[#id="edit-name"]','user1');
I am seeing the following error when I perform the following action. As the ID is dynamically created. Is there a recommended approach to tackle this type of elements?
await I.fillField('//*[#id="crmUiId_1"]','SomeTextHere');
Error:
**TypeError: Cannot read property '$$' of null
at findElements (node_modules/codeceptjs/lib/helper/Playwright.js:2087:18)
at Playwright._locate (node_modules/codeceptjs/lib/helper/Playwright.js:822:12)**
Associated HTML:
<div crm-ui-field="{name: 'caseTypeDetailForm.title', title: ts('Title')}" class="ng-isolate-scope crm-section"><div class="label">
<label crm-ui-for="caseTypeDetailForm.title" crm-depth="1" crm-ui-force-required="" for="crmUiId_1"><span ng-class="cssClasses"><span ng-transclude=""><span class="ng-binding ng-scope">Title</span></span><span crm-ui-visible="crmIsRequired" class="crm-marker ng-isolate-scope" title="This field is required." style="visibility: inherit;">*</span></span></label>
<!-- ngIf: help -->
</div>
<div class="content" ng-transclude="">
<input crm-ui-id="caseTypeDetailForm.title" type="text" name="title" ng-model="caseType.title" class="big crm-form-text ng-pristine ng-scope ng-empty ng-invalid ng-invalid-required ng-touched" required="" id="crmUiId_1">
</div>
<div class="clear"></div>
</div>
The issue here is actually the ID "crmUiId_1" is dynamically generated. Instead I tried xpath with ng-model="caseType.title" but it doesn't seem to be working either.
I would just make sure you wait for it:
await page.waitForSelector('#crmUiId_1')
await page.fill('#crmUiId_1', 'whatever')
Otherwise the page might still be loading.
I have a typical updateUser form built with Thymeleaf + Spring. I can list the user roles but I am trying to put these into a selectbox component. I am struggling with this line th:selected="${user.hasRole(role.role)}". Now, I know this component works and that is only a matter of access a boolean function to enable it. I am trying to reference a function of the form object using the select th:object. My syntax doesn't work. I have also try to access that function just like previous input tags would (only using the name without the object itself .ie username or in this case hasRole(). That doesn't work either.
<form th:object="${user}"
th:action="#{'/admin/usermanagement/adduser'} " method="post">
<div class="row">
<div class="col-md-3 form-group">
<label>Username:</label> <input type="text" class="form-control"
th:field="*{username}" />
</div>
</div>
<div class="col-md-3">
<h5>Roles :</h5>
</div>
<select class="js-example-basic-multiple" style="width: 75%"
name="froles" id="froles" multiple="multiple">
<option th:each="role : ${roles}" th:value="${role.role}"
th:selected="${user.hasRole(role.role)}"
th:text="${role.role}"></option>
</select>
<button type="submit" class="btn btn-primary">Submit</button>
In fact, my problem is types. th:selected="${user.hasRole(role.role)}" is a string and should be th:selected="${user.hasRole(role)}". I have both method in the domain object so that is fine.
th:value="${role.role}" is wrong for persistence. I want to return role but I get the following error message when I use role.role
codes [user.roles,roles]; arguments []; default message [roles]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.util.List' for property
and Java null exception when I use "${role}"
I'm currently trying to add validation to an angular 2 form, but for some reason I can't get my submit button to disable when the required fields are not filled in.
Here is the code of my form template:
<h1 md-dialog-title>{{title}}</h1>
<form #formCtrl="ngForm">
<md-dialog-content>
<md-input-container>
<input #name md-input placeholder="Name" value="" name="name" focused required>
</md-input-container>
<br />
<md-select #inputtype placeholder="Input type" name="inputtype">
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
According to several examples, this should work, however the button is never disabled. I've also tried "!formCtrl.valid", also to no avail.
I've tried using non-material design input fields thinking maybe that would be the issue, but it still won't work.
I then tried copy/pasting the following simple example into my application, and even that won't work at all:
http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/
Any ideas as to what might prevent it from working correctly?
Assuming you are using a newer release than Angular 2 final:
You need to add ngModel, which binds the form value based on the name attribute’s value. In your case one is name="inputtype" the other is name="name". So you need to add ngModel to bind the values, and your form should work as you wish! :)
So the following should work (removed a bit of noise from code):
<form #formCtrl="ngForm" (ngSubmit)="save(formCtrl.value)"> //whatever your submit method is
<md-dialog-content>
<md-input-container>
<input md-input name="name" required ngModel>
</md-input-container>
<md-select name="inputtype" required ngModel>
<md-option *ngFor="let inputtype of inputtypes" [value]="inputtype.id">
{{inputtype.name}}
</md-option>
</md-select>
</md-dialog-content>
<md-dialog-actions>
<button type="submit" md-raised-button color="primary" [disabled]="!formCtrl.form.valid">Create</button>
</md-dialog-actions>
</form>
Don't remember when this was introduced, this should be found somewhere in the changelogs which can be useful to have a look at once in a while, since Angular is constantly tweaking things almost in every release. So following that will keep you updated with changes and syntax :)
I am currently using hibernate-distribution-3.6.4.Final. New to Hibernate Validator.
Problem:
How should I retrieve error messages I got from adding annotations to databean/formbean? I know in Spring that everyone seems to use messages.properties file from the classpath?
But how about pure hibernate 3, is there any file like that or what should i do instead? (Didn't find good answers online...)
Hope this will help. Source is : Mastering Spring MVC
You will need to add a few more things for validation to work. First, the controller needs to say that it wants a valid model on form submission. Adding the javax.validation.Valid as wel as
import org.hibernate.validator.constraints.Email;
import org.hibernate.validator.constraints.NotEmpty;
annotation to the parameter representing the form does just that:
#RequestMapping(value = "/profile", method = RequestMethod.POST)
public String saveProfile(#Valid ProfileForm profileForm,
BindingResult bindingResult) {
if (bindingResult.hasErrors()) {
return "profile/profilePage";
}
System.out.println("save ok" + profileForm);
return "redirect:/profile";
}
Note that you do not redirect the user if the form contains any errors. This will allow you to display them on the same web page. Speaking of which, you need to add a place on the web page where those errors will be displayed.
Add these lines in profilePage.html:
<form th:action="#{/profile}" th:object="${profileForm}"
....">
<div class="row">
<div class="input-field col s6">
<input th:field="${profileForm.twitterHandle}"
id="twitterHandle" type="text" th:errorclass="invalid"/>
<label for="twitterHandle">Twitter handle</label>
<div th:errors="*{twitterHandle}" class="redtext">
Error</div>
</div>
<div class="input-field col s6">
<input th:field="${profileForm.email}" id="email"
type="text" th:errorclass="invalid"/>
<label for="email">Email</label>
<div th:errors="*{email}" class="red-text">Error</div>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input th:field="${profileForm.birthDate}"
id="birthDate" type="text" th:errorclass="invalid" th:placeholder="${
dateFormat}"/>
<label for="birthDate">Birth Date</label>
<div th:errors="*{birthDate}" class="red-text">Error</
div>
</div>
</div>
<div class="row s12">
<button class="btn indigo waves-effect waves-light"
type="submit" name="save">Submit
<i class="mdi-content-send right"></i>
</button>
</div>
</form>
Yes Indeed, Spring Boot takes care of creating a message source bean for us.
The default location for this message source is in
src/main/resources/messages.
properties.
Create such a bundle, and add the following text:
Size.profileForm.twitterHandle=Please type in your twitter user name
Email.profileForm.email=Please specify a valid email address
NotEmpty.profileForm.email=Please specify your email address
PastLocalDate.profileForm.birthDate=Please specify a real birth date
NotNull.profileForm.birthDate=Please specify your birth date
typeMismatch.birthDate = Invalid birth date format
.