Detect ng-model change into directive - validation

I'm doing a custom validation (directive) to compare two dates and show error if start_date is greater than end_date...
I'm passing start_date through ng-model
ng-model="start_date"
and end_date with my directive:
lower-than-date="{{end_date.toISOString()}}" //ignore the toISOString()
The input where I'm using my directive...
<input type="text" ng-model="start_date"
datepicker-popup="yyyy-MM-dd" min="today" show-weeks="false"
lower-than-date="{{end_date.toISOString()}}"/>
The directive...
.directive("lowerThanDate", ['$parse', function($parse) {
return {
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
var lowerThan = null;
function revalidate(_val) {
var valid = _val && lowerThan ? _val < lowerThan : true;
ctrl.$setValidity('lowerThanDate', valid);
}
attrs.$observe('lowerThanDate', function(_value) {
//Here I'm detecting when end_date change
lowerThan = new Date(_value);
revalidate(ctrl.$modelValue);
});
ctrl.$parsers.unshift(function(_value) {
revalidate(_value);
return _value;
});
}
};
}])
This code is working fine, but the validation is triggered only when I change the end_date. I want to validate when I change start_date too.
So, the question is: How can I "observe" the ng-model value to trigger the validation when start_date change.
Note:
This is a generic directive to compare dates. Keep this on mind.

Set up binding to ngModel inside your link function:
var modelValue = $parse(attr.ngModel);
scope.$watch(modelValue, function(value) {
// validate value against endDate.
});

You should a formatter: "Array of functions to execute, as a pipeline, whenever the model value changes".
So just do something like:
function revalidate(_val) {
var valid = _val && lowerThan ? _val < lowerThan : true;
ctrl.$setValidity('lowerThanDate', valid);
return _val;
}
....
ctrl.$formatters.unshift(revalidate);
ctrl.$parsers.unshift(revalidate);
As the reason could be that the model changed from some other place, not directly in DOM element.

Related

ExtJS 6: TreePicker does not fire change event

See fiddle here: https://fiddle.sencha.com/#fiddle/2iig&view/editor
The docs (https://docs.sencha.com/extjs/6.6.0/classic/Ext.ux.TreePicker.html#event-change) list 'change' in the events section but when I set the value or reset the field this event never fires. The 'select' event fires as expected but that only fires when the user selects a field.
EDIT:
Based on Snehal's suggestion below, I was able to accomplish this using the following override. Not sure if there is a simpler way to do it but this was the best I could manage:
Ext.define('MyApp.overrides.TreePicker', {
override: 'Ext.ux.TreePicker',
setValue: function (value) {
var me = this,
record;
me.value = value;
if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
return me;
}
// try to find a record in the store that matches the value
record = value ? me.store.getNodeById(value) : me.store.getRoot();
if (value === undefined) {
record = me.store.getRoot();
me.value = record.getId();
} else {
record = me.store.getNodeById(value);
}
// zeke - this is the only line I added to the original source
// without this the 'change' event is not fired
me.callSuper([value]);
// set the raw value to the record's display field if a record was found
me.setRawValue(record ? record.get(me.displayField) : '');
return me;
}
});
Because setValue function does not call this.callParent(). You can do something like this in setValue function.
setValue: function(value) {
var me = this,
record;
if (me.store.loading) {
// Called while the Store is loading. Ensure it is processed by the onLoad method.
return me;
}
// try to find a record in the store that matches the value
record = value ? me.store.getById(value) : me.store.getRoot();
me.callParent([record.get('valueField')]);
return me;
},

Minimum one field required in a list of multiple fields in magento admin form

How to validate minimum one field required in a list of multiple fields in magento admin form.
Form Field includes text box,select fields in admin form.
if(Validation) {
Validation.addAllThese([ ['validation-myown','Please insert proper word',function(v,r){ var a = Validation.get('IsEmpty').test(v);
if(a == false){
return true;
}else{
return false;
}
} ], [ ] ]) }
You can try this using jquery:
$("#FORMID").submit(function(){
var elemcount=0;
$(this).find('input[type=text], select').each(function(){
if($(this).val() != "") elemcount+=1;
});
// If the value of elemcount variable is 0, all elements are empty.
// Your select should have a default value as blank.
// If it is not so you have to add separate code for select and input.
});

Dexie.js - ordering with more than one index

I am using dexie.js to interface with IndexedDB. I am wondering if it is possible to orderby or sortby using more than one index at once (eg. db.people.orderBy( index1, desc : index2, asc )...
If it is possible, what is the correct syntax?
Either use compound indexes, or use Collection.and().
If you can live with only targeting Chrome, Firefox or Opera, you can use compound indexes. If it must work on Safari, IndexedDBShim, Edge or IE, you cannot use compound indexes today. There's a shim that enables it for IE/Edge though, but it is still in beta, so I would recommend to instead use Collection.and() for those cases.
Let' say you have a form where users can fill in various attributes of friends:
<form>
<input name="name"/>
<input name="age"/>
<input name="shoeSize" />
</form>
Using Collection.and()
First, pick the most probably index to start your search on. In this case, "name" would be a perfect index that wouldn't match so many items, while age or shoeSize would probably match more friends.
Schema:
db.version(X).stores({
friends: "id, name, age, shoeSize"
});
Query:
function prepareQuery () {
// Pick a good index. The picked index will filter out with IndexedDB's built-in keyrange
var query;
if (form.name.value) {
query = db.friends.where('name').equals(form.name.value);
} else if (form.age.value) {
query = db.friends.where('age').equals(parseInt(form.age.value));
} else if (form.shoeSize.value) {
query = db.friends.where('shoeSize').equals(parseInt(form.shoeSize.value));
} else {
query = db.friends.toCollection();
}
// Then manually filter the result. May filter a field that the DB has already filtered out,
// but the time that takes is negligible.
return query.and (function (friend) {
return (
(!form.name.value || friend.name === form.name.value) &&
(!form.age.value || friend.age == form.age.value) &&
(!form.shoeSize.value || friend.shoeSize == form.shoeSize.value));
});
}
// Run the query:
form.onsubmit = function () {
prepareQuery() // Returns a Collection
.limit(25) // Optionally add a limit onto the Collection
.toArray(function (result) { // Execute query
alert (JSON.stringify(result, null, 4));
})
.catch (function (e) {
alert ("Oops: " + e);
});
}
Using compound indexes
As written above, compound indexes code will only work on mozilla- and chromium based browsers.
db.version(x).stores({
friends: "id, name, age, shoeSize," +
"[name+age+shoeSize]," +
"[name+shoeSize]," +
"[name+age]," +
"[age+shoeSize]"
});
The prepareQuery() function when using compound indexes:
function prepareQuery() {
var indexes = []; // Array of Array[index, key]
if (form.name.value)
indexes.push(["name", form.name.value]);
if (form.age.value)
indexes.push(["age", parseInt(form.age.value)]);
if (form.shoeSize.value)
indexes.push(["shoeSize", parseInt(form.shoeSize.value)]);
var index = indexes.map(x => x[0]).join('+'),
keys = indexes.map(x => x[1]);
if (indexes.length === 0) {
// No field filled in. Return unfiltered Collection
return db.friends.toCollection();
} else if (indexes.length === 1) {
// Single field filled in. Use simple index:
return db.friends.where(index).equals(keys[0]);
} else {
// Multiple fields filled in. Use compound index:
return db.friends.where("[" + index + "]").equals(keys);
}
}
// Run the query:
form.onsubmit = function () {
prepareQuery() // Returns a Collection
.limit(25) // Optionally add a limit onto the Collection
.toArray(function (result) { // Execute query
alert (JSON.stringify(result, null, 4));
})
.catch (function (e) {
alert ("Oops: " + e);
});
}
Using arrow functions here to make it more readable. Also, you're targeting chromium or firefox and they support it already.

Zend 1 ajax with dojo informatiom person

I'm working with Zend 1 with dojo and do not know how to use ajax . In my particular case that when selecting a select , whether made ​​in consultation ajax back from the database information. To enter a ID from user print the information from user by ajax.In my work I can't use jquery.
Good question!
Not is very productive work with dojo, but is possible make exactly how do you want. You will create p element with information captured in data base
In your form, add attribute 'onChange'
$form->setAttrib('onChange', 'recoveryData()');
In js file do you have a function recoveryData(), something as:
dojo.require("dojo.html");
// clean data
var myNewElement = dojo.byId('myNewElement');
if (myNewElement != null) {
dojo.empty("myNewElement");
}
dojo.xhrPost({
content: {id: dojo.attr(dojo.byId("myElement"), "value")},
url: 'your-base-path/recovery-data/',
load: function (response) {
if (response != false) {
// converte to obj
var obj = dojo.fromJson(response);
// creat new element
var node = dojo.create("span", {
innerHTML: obj.NomeServidor,
id: "myNewElement",
'class': 'row'
}
);
dojo.place(node, dojo.byId("myElement"), "after");
}
}
});
Now, you need create an Action "recoveryDataAction()" in your Controller like this:
$data = $this->getrequest()->getPost();
$id = $data['id'];
if ($this->getrequest()->isXmlHttpRequest()) {
// disable layout
$this->_helper->layout()->disableLayout();
// disable view render
$this->_helper->viewRenderer->setNoRender();
$yourTable = new Project_Model_YourTable();
$row = $yourTable->fetchRow($id);
if ($infos != null) {
echo Zend_Json::encode($row);
return;
}
echo false;
}

Knockout custom validation issue

Say I have a model with following properties:
function ViewModel() {
this.SetupTime = ko.observable();
this.CloseTime = ko.observable();
this.MinHrs = ko.observable();
}
I need to add a validation rule so that MinHrs > (SetupTime + CloseTime). Whenever one of the three fields is changed this validation should fire. I know I have to write a custom validation for this, for example:
ko.validation.rules['ValidWorkRange'] = {
validator: function (val, setuptime, closetime, minhrs) {
return minhrs > (setuptime+closetime);
},
message: '(Shift End - Shift Start) >= Shortest Work Segment'
};
I'm not sure what I have done there is correct, also not sure how to call this validation within the observable.
Can someone please help me out?
Thanks in advance
Yes you are right, you should create a custom validation to achieve your goal. And you have no need to call validation function, it will be automatically called whenever its associated dependency (observables) will change.
Wroking Fiddle
Note : Please apply the other necessary validation like number etc. Because if you enter text in any input field in the fiddle code than result may be an error.
Here is the custom validation code :
var ValidWorkRange = function(val, param)
{
if(val && param){
var minHrs = parseInt(val, 10);
var setupTime = parseInt(param[0](), 10);
var closeTime = parseInt(param[1](), 10);
return minHrs > (setupTime+closeTime);
}
};
And like this you can apply it on your observable :
function ViewModel() {
var self = this;
self.SetupTime = ko.observable();
self.CloseTime = ko.observable();
self.MinHrs = ko.observable().extend
({
validation: {
validator: ValidWorkRange,
message: 'Not valid.',
params: [self.SetupTime, self.CloseTime]
}
});
}
I don't know so much about ko validation but probably it can be usefull for you
https://github.com/ericmbarnard/Knockout-Validation

Resources