How do I get validation errors from within a form group - vue-formulate

When using Vue Formulate, if you have a form group with nested form fields, how do you get the errors on those form fields?
If I bind a handler to the parent form, like this:
<formulate-input #validation="myValidationEvent"> ...
If I log the output from that event to the console, the output for a normal form field looks this this:
{name: 'personalDetails', errors: Array(1), hasErrors: true}
where errors is an array containing the errors. But if I do the same for a form group, I get this:
{name: 'personalDetails', errors: Array(0), hasErrors: true}
Note the empty errors array. How do I get to the errors on the form fields nested inside the group?
Thanks!

Related

In vuelidate use a label rather than $property in customizing validation messages

Sometimes it would be more convenient to customize a validation message with a label rather than the property. For example:
Let's imagine there is a field in form named 'x' but the UI interface shows it as 'Name' (the field label). But, as fas as I understand, the customizazion of a validation message does allow only the use of properties, that is name fields.
validations: {
required: "The field {property} is required.",
}
Is there a way to use a label to customize the above message?
Thank you!

How to auto-close date popup and hide div on selected change of element?

Rent Date doesn't auto close. It’s getting error as below. I'm not sure it's inside of the Div. Getting below error.
"[Vue warn]: Error in v-on handler: 'TypeError: $refs.qDateProxy.hide is not a function'
Want to hide the RentDate when user select Buy from individual Book’s Select Option. How should I change it? There will be multiple books.
Codepen
To auto close the date popup when user select on the date.
Hide 'RentDate' when user choose
You could use v-if or v-show for conditional hide show the Book RentDate on changes of boot type.
The directive v-if is used to conditionally render a block. The block will only be rendered if the directive’s expression returns a truthy value.
<h1 v-if="awesome">Vue is awesome!</h1>
Another option for conditionally displaying an element is the v-show directive. The usage is largely the same:
<h1 v-show="ok">Hello!</h1>
And for this error $refs.qDateProxy.hide, you can create a method and inside of this method you can use like below
onRentDateChange(){
this.$refs.qDateProxy[0].hide()
},
You can check here with working codepen.io.
EDIT
As per OP's comment, I have updated codepen.io. I have taken boolean variable inside of this.$data.Books array and used .find() method of array for changing variable status.
onValueChange(val,id){
let rec = this.$data.Books.find(({ID})=> ID==id);
if(rec) rec.isRentShow = val == 'Rent';
},

dojox.grid.EnhancedGrid losing focus

I have to refresh an Enhanced List as i have a "quick search" input field
that should update the list while you type. It does work fine, until I select one of the result rows. Then I move back to the input field and start typing but at that moment, the focus is lost and after every letter I have to click back to the input field.
Any method I found refreshing the grid sets the focus to the first header
cell. This means of course that my input field
looses focus. I cannot type more than 1 char without refocusing the field
:-(
Any idea how to re-render a grid (or enhanced grid) without changing focus?
gridtoc = new dojox.grid.EnhancedGrid({
id: 'gridtocsearch',
store: storetoc,
structure: layout,
class: 'grid',
align: 'center',
keepSelection: true,
plugins: {
filter: true
}
});
Thanks a lot, Monika
can you try like
keepSelection:false
official document says
keepSelection
Defined by dojox.grid.EnhancedGrid
Whether keep selection after sort, filter, pagination etc.
***************** updated answer*****************
take a look at this jsfiddle
http://jsfiddle.net/bnqkodup/520/

getQueryParams() from gridview's url after search and create another URL with same params for anchor tag inside GridView

I'm using GridView::widget, when I enter anything on search box inside gridview, it's creating url as below:
/v2/backend/web/index.php/agency/index?AgencySearch%5Bgovt_name%5D=&AgencySearch%5Bcity%5D=&AgencySearch%5Bmember_id%5D=22
Now I need to pass those paramters to url inside status icons present under GridView's Status column.
echo Url::to(['agency/change-status', 'id' => 33, 'set' => 11, Yii::$app->request->getQueryParams()]);
Above code is creating url as below:
/v2/backend/web/index.php/agency/33/change-status/11?1%5BAgencySearch%5D%5Bgovt_name%5D=&1%5BAgencySearch%5D%5Bcity%5D=&1%5BAgencySearch%5D%5Bmember_id%5D=22
And it makes sense because Yii::$app->request->getQueryParams() is an array. Note 1 inside url change-status/11?1%5BAgencySearch
Is there any simplest Yii way of achieving what I need instead of modifying Yii::$app->request->getQueryParams() as per Url::to() that is into string.
I'm trying to pass parameters in order to persist the state of gridview while loading contents again on grid after status change pjax request.
Use array_merge to combine your route and parameters and the search params.
$params = array_merge(['agency/change-status', 'id' => 33, 'set' => 11], Yii::$app->request->getQueryParams());
echo Url::to($params);

Sencha Touch 2: Insert into TreeStore/NestedList

I'm using a NestedList with a underlying TreeStore. Now I want to add items to the NestedList as leafs.
How can I do this?
Currently my code (Controller, onAddButtonTapped) looks like this:
var store = Ext.getStore('menuStore');
var customerAreaNode = store.getRoot().getChildAt(1);
customerAreaNode.appendChild({name: "text", leaf:true});
customerAreaNode.expand();
store.sync();
This code results in two new empty listentries on leaf level (behind the correct node) and one new listentry on node level.
Every new entry has no names shown in the NestedList but every item contains "text" in their name field. Curiously one of the new entries at leaf level is not typed to the underlying Model. So the model-corresponding methods could't be found:
Uncaught TypeError: Cannot call method 'getSelectedName' of undefined
Does anybody know a easy tutorial how to add data into NestedList/TreeStore? I could not find one good example in the sencha touch docs.
The default display field for leaf items is "text". You can get the information from here. If you want to use "text" as display field, then you need to change this line to
customerAreaNode.appendChild({text: "text", leaf:true});
Or you can change your nested list's display field, so your model do not need to change for this time.
yournestedlist.setDisplayField('name');
Hope this helps.
In my case i used to update root and child nodes like the following way
Ext.getStore('Contactsstore').getAt(1).getChildAt(0).set('Email',contactemail);
Ext.getStore('Contactsstore').getAt(1).set('ContactTitle',contacttitle);