I have a simple select list in my Aurelia view which I'm trying to set a default value on of 'Select...'. I'm also using the aurelia-validation plugin to ensure that the value is changed before the form is submitted. The plugin works great for other field types in my project.
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="">Select..</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
In the VM:
constructor(validation) {
this.agencies = null;
this.agencyId = 0;
this.validation = validation.on(this)
.ensure('agencyId')
.isNotEmpty();
}
activate() {
//call api and populate this.agencies
}
After the page initially loads I get my agencies in the list and my default value is correct, but it shows the validation error message:
Other form fields, like text boxes don't do this and show no error message until the user interacts with the form controls.
Is there something special I need to do for a select list to hide validation errors on the initial loading of the view? I suspect that binding the select list in the view is somehow triggering a change event.
Thanks to a kind Aurelia user on Gitter, the problem was solved by setting the initial value of this.agencyId to "". Originally I had the this.agencyId = null. That was my mistake. Because it was null and not "" (as was the default value in the select list) the values didn't match so the select list was invalid when the view loaded. At least, that's my understanding.
The lesson is, if you want to validate a select list, make sure you VM property is initialized to the same value as your select list's default value.
constructor() {
this.agencyId = ""; **//must match the bound property's initial value**
}
And in the view:
<div class="form-group">
<label for="agencies" class="control-label">Agency</label>
<select value.bind="agencyId" class="form-control">
<option value="" **<!-- this value must match the VM initial value -->** selected="true">Select...</option>
<option repeat.for="agency of agencies" value.bind="agency.id">${agency.name}</option>
</select>
</div>
Related
I have an input and a select in my VUE application that are shown depending on the selection of a previous input.
If I insert values and change the initial input selection, I hide the second input and select, to restart the form.
The problem comes when I restart the form and I still get the selected values on the first load.
I'm trying to reset the values but none of the methods I've found in similar case reviews works fine.
Here's my select and my input that i want to reset values
<h1 v-if="this.isSelected"> What's your selection ?</h1>
<select
ref="item"
class="form-control"
id="selectedItem"
v-model="itemFormInfo.selectedItem"
#change="onChangeItem($event)">
<option v-for="item in filteredItem" v-bind:key="item.name">{{ item.name }}</option>
</select>
<div v-show="this.isItemSelected">
<h1>what's your item name ?</h1>
<input
type="text"
id="name"
ref="itemName"
class="form-control fields"
style="text-transform: capitalize"
v-model="itemFormInfo.name"
#keypress="formChange($event)"
/>
<div class="loader-spinner" v-if="loading">
<app-loader/>
</div>
</div>
and here's my method where I have tried the reset and document.getElementById('').value("") methods;
onChangeSpecie(event) {
let specie = event.target._value;
this.specieName = this.getSpecieName(specie);
this.breedName = this.getBreedName(specie);
this.$refs.breed.focus();
if (this.isBreedSelected = true) {
this.isBreedSelected = false;
this.isNameCompleted = false;
this.isLoaderFinished = false;
this.$refs.animalName.item()
}
},
If I print by console I see how the value is emptied but the input appears with the written value until I focus on the .
How do I stop it from appearing?
in neither method does it erase my previous values showing on the input.
what am I doing wrong?
thank you all for your help and time in advance
I believe you need to null the model not the target element's value.
this.itemFormInfo.name = null
I am looking to auto fill form data based on a table row selection. My problem is I cannot set the correct Selected item in input boxes
I have tried using v-model (as below). I have also tried using
Html Input:
<select #change="typeSelected(selectedType)" v-model="selectedType">
<option v-for="type in types" v-bind:key="type.id" v-bind:value="type.id">{{ type.name }}</option>
</select>
Vue function to update the selected item
public setSelected(type: AssetTypeDto | undefined){
if(type) {
this.selectedType = type;
}
}
Also i tried <option :selected="type.id === selectedType.id". This didn't work either
I have some issues with IE 11 and Jaws. Please take a look at the example below.
Simplified code example:
<input type="text" />
<span role="alert" aria-live="assertive" id="err"></span>
<select id="colours">
<option value="White">White invalid</option>
<option value="Green">Green invalid</option>
<option value="Red">Red</option>
<option value="Blue">Blue</option>
</select>
var i = 0;
$('#colours').on('keyup', function (e) {
if ($(this).prop('selectedIndex') < 2) {
$('#err').html('an error has occurred ' + i++);
}
else {
$('#err').html('');
}
});
jsfiddle: https://jsfiddle.net/obwapffq/2/
Basically, I am validating the selected element in a dropdown list (in the example 'white' and 'green' values are invalid). I am only using the keyboard's up and down buttons to change the selected value. If an invalid option is selected, I update the content of a span element with the appropriate error message. The span element has role="alert" and aria-live="assertive". I have 2 issues:
If the selected option is invalid, the error message is read out, but the selected option is not read out and so the user does not know what option is invalid i.e. what option caused that error.
Sometimes even the valid options are not read out. This mostly happens with the first valid option in the list i.e. in the example 'Red'
This is working 100% correct with NVDA.
Any ideas?
Please add aria-label="yourOptionText" attribute to your option tag.
for e.g. aria-label="White Invalid".
Hope this will help.
When writing functional tests, how can I set the value of a select box if I only have the label of the option I want, but not the actual value?
I'm not sure I got exactly what you need, I suppose you have a form like this
<form action="..." method="post">
...
<select id="my_form_category" name="my_form[category]">
<option value="1">category1</option>
<option value="2">category2</option>
<option value="3">category3</option>
</select>
...
<button type="submit">Edit</button>
</form>
and you want to select category2. Even if you don't know the option value you can use the crawler to extract it
$client = static::createClient();
// go to form
$crawler = $client->request('GET', '...');
$value = $crawler->filter('#my_form_category option:contains("category2")')->attr('value');
$form = $crawler->selectButton('Edit')->form();
$form['my_form[category]']->select($value);
// ... set other values
$client->submit($form);
I have a custom widget which has a content pane (among other things). In it I have a multiselect listbox. I have a assigned a dojoAttachPoint to the listbox.
I want to populate the listbox when the widget is created.
In postCreate I try to fill the listbox with items, but the reference to
this.selectFrom (which is the dojoAttachPoint) is null.
Why would this not be available in postCreate? Any workarounds?
Thanks in advance
HTML:
<div dojoType='dijit.layout.ContentPane'>
<select name="drop1" style='width:200px;'
id="selectTo" dojoAttachPoint='selectTo'
size="10" multiple="multiple">
<option value="1">second col</option>
<option value="2">option two</option>
</select>
</div>
JS:
postCreate: function (){
this.inherited (arguments);
var newOption = document.createElement('option');
text = 'Mark Brown';
value = '1';
selectTo.options [this.selectTo.options.length] = new Option (name,value);
}
this.selectTo is null and it shouldn't be.
Thanks
I think dojoAttachPoint is only meaningful in templates (see dijit._Templated) Templates are separate strings/files which are used to compose widgets and are generally not used inline in the page.