I have a dropdown using wire:model
<div class="form-group">
<label>Menu</label>
<select wire:model="chapter_id" class="form-control #error('chapter_id') is-invalid #enderror" placeholder="Menu">
#foreach ($chapters as $chapter)
<option value="{{ $chapter->id }}">{{ $chapter->name }}</option>
#endforeach
</select>
#error('chapter_id')
<div class="invalid-feedback">{{ $message }}</div>
#enderror
</div>
It works if I do change the option (the $chapter_id assigned successfully). But, if I leave it default (not change the option), or it has only an option, the $chapter_id will not assigned
$chapter_id not assigned
Can you guys help me to solve this issue?
I see 2 ways to work around this. As tell the other before, one have an option for advice the user to select an option
<option value="">Please select</option>
and the other have a defaul value for this property
public $chapter_id = '1';
if this value is required on submit you have to refer it in the rules
protected $rules = [
'chapter_id' => 'required'
];
wire:model is only set or updated on change. Hence if you are already on the item (or there is only one), it will not be triggered. You could work around this using wire:init, but I don't see much benefit compared to setting it directly in your mount-method of the component.
My solution is to add an "Please select" entry as the first one. This enforces to trigger a change by selecting the item in question (even if only one option is available).
Related
I appreciate your passing by my post. I have searched here in StackOverFlow and google as well to fix my following code:
My HTML code:
<form th:action="#{/surgerywaitinglist/saveToWaitinList}"
th:object="${waitinglistDTO}" method="POST">
.
.
.
<select name="departmentName"
th:field="*{department.departmentName}"
th:with="departmentName = ${waitinglistDTO.department.departmentName}"
class="form-control" id="departmentJS">
<option value="" th:selected="selected"
th:disabled="disabled">select option
</option>
<option th:each="department: ${departments}"
th:value="${department.departmentName}"
th:text="${department.departmentName}">
</option>
</select>
.
.
.
<input type="submit" value="Save" class="btn btn-primary" />
</form>
form other posts like this post I found out that th:field and th:selected do not work together; in fact, th:field needs to be replace with something else. Notice that the th:object holds another object (from Department class) ...
My DTO class:
public class WaitinglistDTO {
private Long waitingListId;
#NotBlank(message = "Please enter a procedure")
private String waitingListProcedure;
private String waitingListDiagnosis;
private Long waitingListPatientId;
private Long waitingListSurgeonId;
private Long waitingListDepartmentId;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListAdditionDate;
#DateTimeFormat(iso=ISO.DATE)
private Date waitingListActualBookingDate;
private Patient patient;
private Surgeon surgeon;
private Department department;
Could you help me figure this out?
Many thanxxxxx :)
...
Update:
The following image explains how it should look,,, however, the default option should be the select option which should be somehow disabled
This is the result I get when I apply the suggested code of Rafael da Silva ,, you can see the pre-selected option is the first option rather than the select option option :)
you can do like this:
<select name="departmentName" th:field="*{department.departmentName}" th:with="departmentName = ${waitinglistDTO.department.departmentName}" class="form-control" id="departmentJS">
<option selected="selected" disabled="disabled">select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
this worked for me.
I don't see why you would add the selected to the blank option, the first option is always selected if your model object has nothing set and if it does normal behaviour would be to have that item selected, which th:field should resolve.
In case you want the select to always start at the default option, even if the model has another value or want to set it some other way. you can set th:id="*{department.departmentName}" and th:name="*{department.departmentName}" and than manualy handle th:selected.
As a side note theres no need to use the th version th:selected="selected" if using static values just selected or selected="selected would sufice in that case
Edit with code, not tested as i don't have my work pc where i am.
If you want to always have the first option selected even when editing with previous data
<select name="departmentName" th:name="*{department.departmentName}" th:id="*{department.departmentName}" class="form-control" id="departmentJS">
<option selected disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
If you want to fill with existing data but default to the first option
<select name="departmentName" th:field="*{department.departmentName}" class="form-control" id="departmentJS">
<option disabled>select option</option>
<option th:each="department : ${departments}" th:value="${department.departmentName}" th:text="${department.departmentName}"></option>
</select>
I'm not 100% sure on the use of disabled but i think it should work, personally i would just leave it selectable and enforce a #notnull on your bean in controller validation.
the th:with annotation does nothing asfar i can see, what th:with is used for is defining a new variable for all elements nested inside the elment you define it on. example:
<div th:with="newVar='someString'">
<span th:text="${newVar}"></span>
</div>
I have a select box that has the option of yes and no, if the selected option is yes the percentage form will be required otherwise the percentage is not required.
this is the select form
<select name="downpaymentrequired">
<option value="1">Yes</option>
<option selected="selected" value="0">No</option>
</select>
<span>
#error('downpaymentrequired'){{ $message }}#enderror
</span>
this is the percentage form
<input min="0" maxlength="3" disabled id="downPaymentPercentageForm" type="text" name="downPaymentPercentage">
<span class="text-danger">
#error('downPaymentPercentage'){{ $message }}#enderror
</span>
and this is my validation
'downpaymentrequired' => 'required|bool',
'downPaymentPercentage' => 'exclude_if:downpaymentrequired,false|required|numeric|between:1,100'
Hello guys, please help me i know it might be a duplicate but the problem is the existing answer doesn't work for me I hope you help me.
'downpaymentrequired' => 'required|bool',
'downPaymentPercentage' => 'required_if:downpaymentrequired,1|numeric|between:1,100'
I just see the answer. I decided not to delete this post because someone might have the same problem as this. I hope this code will help you. you're welcome.
<input type="checkbox" name="grievance_discipline" value="checked">
<select name="grievance_type">
<option value="_none" selected>- Select One</option>
<option value="suspension">Suspension</option>
</select>
<?php
$this->validate($request,[
'grievance_type' => 'required_if:grievance_discipline, checked|not_in:_none',
]);
?>
The trouble I am running in to, is telling Laravel to ONLY use a particular validation rule if another field has a value.
In the example, the discipline_type field (a select list), is required IF grievance_discipline is checked.
The default select option for the select list is - Select One - with the value of _none. In the validation rules, _none should be thrown out, but it should ONLY validate on it if the grievance_discipline checkbox has value 'checked'.
Could anybody help me with this, please?
How about setting the first option as disabled so the user are forced to pick a value or not submitting a value, hence gracefully fail your validation check. Also, use required_with instead of required_if to check if another value exist or not.
<input type="checkbox" name="grievance_discipline" value="checked">
<select name="grievance_type">
<option disabled selected value>- Select One</option>
<option value="suspension">Suspension</option>
</select>
Then in the PHP, do
$this->validate($request,[
'grievance_type' => 'required_with:grievance_discipline'
]);
I have this piece of code that I did not write, but need to trouble shoot. The user is supposed to have the choice to pick one, two, or all 3 selections, but no matter what we select, nothing is working. It is giving me an error message of "Namespace '#if(Auth' is not bound".
Here is the code that seems to be the root of the problem.
<select id="dates-field2" class="multiselect-ui form-control" multiple="multiple" name="service_type[]" id="service_type">
#foreach(get_all_service_types() as $type)
<option #if(Auth::guard('provider')->user()->service->service_type->id == $type->id) selected="selected" #endif value="{{$type->id}}">{{$type->name}}</option>
#endforeach
</select>
so i have this block of code that goes like such;
<div class="form-group">
<div class="row">
<div class="col-md-12">
<select class="form-control" ng-model="report.outlet">
#foreach ($grSite as $pSite)
#if($jsnUser['selectedSite'] == $pSite['iid'])
<option selected value="{!! $pSite['iid'] !!}">{!! $pSite['profile']['firstName'] !!}</option>
#endif
#endforeach
</select>
</div>
</div></div>
so now here's the problem, when i load the page, all conditions are met, however my option is not automatically selected, it is selected on load, for like 0.5 seconds, and suddenly the select input just goes blank. why is this? also, i've already tried using an #else statement, but it does not work as well. any help would be much appreciated! if it's not clear yet, i'm using a laravel blade template, binding with angular, but this part is purely laravel.
It won't be selected because you are using ng-model. In your angular controller you have to give report.outlet a default value which is part of the options. Then according to that value, the option will be selected by default.
The reason it's selected for 0.5 is because angular isn't ready yet. as soon as Angular is ready, it goes blank.