View:
I have a form with two select fields : The second one only activates when a choice in the first one has been made and the content shown is relative to the first field.
Model :
Establishment (id,name)
Account (id,Establishment)
Logic : The first field loads a list of establishment from the model attribute "etablissements" that the Controller loads.
The second field should then enable itself after a selection has been made (easy), but then it should also show a list of accounts that are "registered" to this Establishment.
The question is how do i set this kind of conditional statement in thymeleaf, knowing that I have access to all establishments and account in the template as shown here :
<form id="demo-form2" data-parsley-validate
class="form-horizontal form-label-left" action="addOP"
th:object="${paiement}" method="post">
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Compte <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" th:field="*{idCompte}">
<option th:each="account : ${etablissements}"
th:text="${etablissement.name}" th:value="${etablissement.name}">Choose
Etablissement</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3 col-sm-3 col-xs-12"
for="first-name"> Imputation <span class="required">*</span>
</label>
<div class="col-md-6 col-sm-6 col-xs-12">
<select class="form-control" disabled="disabled">
<option th:each="account : ${accounts}"
th:text="${account.owner}" th:value="${account.id}">Compte</option>
</select>
</div>
</div>
What's the best way to do this using thymeleaf or javascript ?
PS : Sorry for the formatting haven't found a way to automatically remove those spaces from code.
You should still render the list using thymeleaf and give it a hidden class which sets it to display: none. Then with javascript you can add an eventlistener to the dropdown which looks for that specific value and removes the hidden class to show the list.
Edit: to filter the list you can put a data attribute on the element and show or hide the item based on that data
Related
could you please tell me how to make dropdown without warning or ngModel in angular? I am getting warning this
code
https://stackblitz.com/edit/angular-vsjbr9?file=src%2Fapp%2Fapp.component.ts
how I will acheive the same thing without ngModel
<form novalidate [formGroup]="searchForm" class="calform">
<section class="col-sm-6 bg-white pl-20 pr-20">
<div class="form-group col-sm-8 pl-0">
<label class="field-title mb-5">Circle<span class="color-red fontWt"> *</span></label>
<div class="select width-170 mr-20">
<select formControlName="circle" [(ngModel)]="selectedCircle">
<option class='option'
*ngFor='let o of circle'
[disabled]="o.value==''"
[value]="o.value">{{o.option}}</option>
</select>
</div>
</div>
</section>
</form>
I want first option is selected by default and user never select first option in my example ("select from list never selected")
Something like this? https://stackblitz.com/edit/angular-zxeysz?file=src%2Fapp%2Fapp.component.ts
I've removed the ngmodel. You are already using a formgroup so ngmodel is not needed.
Then in your ts file , you do create the 'circle' control, but you assigned null value. I've altered it to empty string ''. This way the the select is pre-checked with the '' value.
I've a simple bootstrap text field for entering ticket quantity. When I enter ticket quantity as 2, then I want two bootstrap panels having a form created automatically. If the value is 3, then 3 bootstrap panels having a form are created automatically. How can I do it?
JsFiddle link: https://jsfiddle.net/gcxxehwf/
Html code:
<div class="col-md-12 col-xs-12">
<div class="field">
<label for="price">Ticket quantity:</label>
<input type="number" name="tquantity" value="" class="form-control" id="tquantity">
</div>
</div>
<div class="col-md-8 col-xs-12" id="participantpanel"></div>
By using AngularJS it would be much easier than with the jQuery append method. Just use the ng-repeat directive and repeat the panel as often the value is.
I had a "I AGREE" form with XX fields with checkboxes.
This fields come from a SQL table and will be selected or created by the admin.
The Admin can create as many as he wants.
All checkboxes must be required.
There is any way to check and require all checkboxes with one Jquery Rule?
"agree[]": {
required : true,
},
<form class="form-horizontal" id="form" role="form" action="#" method="POST" autocomplete="off">
<div class="form-group has-feedback">
<label class="col-lg-4 col-md-4 col-sm-3 col-xs-3 control-label mLabelText"></label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 form-space checkbox">
<label>
<input type="checkbox" id="agree1" name="agree[]" value="1">
CONDITION 1
</label>
</div>
</div>
<div class="form-group has-feedback">
<label class="col-lg-4 col-md-4 col-sm-3 col-xs-3 control-label mLabelText"></label>
<div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 form-space checkbox">
<label>
<input type="checkbox" id="agree2" name="agree[]" value="2">
CONDITION 2
</label>
</div>
</div>
I try this - but Jquery only requires ONE checkbox, not All.
**** Because I need a "dynamic rule" for all checkboxes - I think this will be the best way to do this..
tks a lot!
It looks like your design is wrong for your needs. You should have separate names for separate checkboxes, as they reflect separate user actions (agreement with a new requirement). This way you will be able, for example, provide unique validation message per checkbox (you may not need this, but still this might a useful future option).
Assuming you have an array of items user should agree with called itemsToAgree and validation object where you defined "agree[]": { required: true } called validationObject, smth like that should work to set up validations:
for (var i = 0; i < itemsToAgree.length; ++i) {
validationObject['agree' + i] = {required: true}
}
after that, you have some sort of dynamic mark up generation, I guess. Use names there in the same format as in validationObject (agree<x>), and it should work.
I do not know your code, so my solution may be irrelevant in your concrete situation, but I think it anyway provides an approach to follow.
I have a form splitted in 4 steps (I made a form "wizard" using ng-switch), the submit button is on the last page of the wizard. I have some troubles making the angular form validation to work . It seems that the formName.$invalid only watches the inputs of the current step of the form.
<form name="carouselForm">
<div ng-switch="modal.getCurrentStep()" class="slide-frame">
<div ng-switch-when="general" class="wave row">
....
</div>
<div ng-switch-when="carousel" class="wave row">
<div class="col-md-12">
<div class="form-group"
ng-class="">
<label for="Title">
Title <span class="red">*</span>
</label>
<div>
<input id="Title"
ng-model="entityData.Title"
type="text"
required
placeholder="" class="form-control input-md">
</div>
</div>
</div>
</div>
<div ng-switch-when="details" class="wave row">
.....
</div>
<div ng-switch-when="description" class="wave row">
.....
</div>
</div>
</form>
I removed most of the form cause it would have been very long. In step two I left an input with the required tag. On this step the carouselForm.$invalid is properly set to true if this field is not set, but as soon as I change to the next step, carouselForm.$invalid is false again even if I didn't filled the required input.
It seems that the angular form validation doesn't watch the inputs in my other ng-switch block. Is there a way to make include them into the validation ?
Thank you very much !
You can replace ng-switch-when by ng-show, that way it doesn't get removed from the DOM, but is hidden using CSS.
Form fields not being added ng-touched class, instead remains ng-pristine
This is my form:
<form novalidate class="css-form">
<div class="form-group clearfix">
<label class="col-xs-12 col-sm-6 col-md-4">State Code</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control" ng-maxlength="2" ng-model="ObjectNew.stateCode" required>
</div>
</div>
<div class="clearfix"></div>
<div class="form-group clearfix">
<label class="col-xs-12 col-sm-6 col-md-4">Zip</label>
<div class="col-xs-12 col-sm-6 col-md-8">
<input type="text" class="form-control" ng-model="ObjectNew.zip" required>
</div>
</div>
<div class="clearfix"></div>
</form>
When I see in inspect element, it does show only ng-pristine class on each field, even if i went through both fields and leaves null.
It shows ng-invalid too, which is fine.
Have to add the styles actually:
.css-form input.ng-invalid.ng-touched {
background-color: #FA787E !important;
}
.css-form input.ng-valid.ng-touched {
background-color: #78FA89 !important;
}
The term pristine and touched are not similar. An input will remain pristine as long as it has not been modified. It is untouched, as long as it didn't loose focus - Angular doc states that ng-touched is applied when "the control has been blurred".
So it is possible for an input to be pristine and touched - just click it, and then click somewhere else without typing anything in.
It is also possible for it to be dirty and untouched - click it, type in some text, but do not click anywhere else.
To see that, and see working ng-touched in action, refer to this jsFiddle.
To make sure it works, use Angular 1.3 as pointed out by #dfsq. Also, use angular-touch which matches your Angular version. The JSFiddle above works correctly.