I want to set formly form fields disabled value based on model properties and boolean variable. This doesn't seem to work
expressionProperties: {
'templateOptions.disabled': 'model.advancePayments && !model.deposit' || vm.acquisitionCancelledFlag
}
It works but the || vm.acquisitionCancelledFlag doesn't make any difference
vm.acquisitionCancelledFlag is true but the field isn't disabled
I have also tried
'templateOptions.disabled': '(model.advancePayments && !model.deposit) || vm.acquisitionCancelledFlag'
Spent some time on this but figured out I can do this instead so I'm sharing it with people who might need it. Not the most elegant but works
expressionProperties: {
'templateOptions.disabled': function(viewValue, modelValue, scope) {
return (scope.model.advancePayments && !scope.model.deposit) || vm.acquisitionCancelledFlag;
}
}
Related
I am creating an app in Vue that will filter items in a JSON object. I am having issues with adding a checkbox type filter to this app, because I only want the checkbox filter to run if at least one checkbox is checked, and not to run if none are checked. So currently I have:
computed: {
filteredJobs: function(){
var filteredList = this.jobs.filter(el=> {
return el.title.toUpperCase().match(this.search.toUpperCase())
&& el.employmentType.toUpperCase().match(this.selectedJobType.toUpperCase())
&& el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
&& el.dateAdded >= this.checkedDate
});
if (!this.checkedServiceAreas.length) {
return filteredList;
}else{
return filteredList.filter(job => this.checkedServiceAreas.includes(job.categories.data.map(({name}) => name).join(' ')));
}
}
}
So I am doing most of my filtering using select dropdowns, which makes it easy to use the match method to filter the JSON object, but for checkboxes it is a little more difficult because they can be multiple checked. How I currently have it set up is in an IF statement to only filter the checkedServiceAreas if there is at least one checkbox checked. If there isn't just run my normal filtered method.
What I am trying to do is figure out a way to incorporate my IF statement into my filter method without having to do it in two steps like I have above.
return el.title.toUpperCase().match(this.search.toUpperCase())
&& el.employmentType.toUpperCase().match(this.selectedJobType.toUpperCase())
&& el.customText12.toUpperCase().match(this.selectedLocation.toUpperCase())
&& el.dateAdded >= this.checkedDate
&& (this.checkedServiceAreas.length === 0 ||
this.checkedServiceAreas.includes(el.categories.data.map(({name}) => name).join(' '))));
I am programming in Polymer 1.0 and am trying to create an IF function to change the value of a property. My function is the following:
_searchButton: function(selectednamedropdown, selectedtypedropdown){
if (selectednamedropdown=="no_name_selected" && selectedtypedropdown=="no_type_selected"){
this.searchUsagesBtn = true
} else{
this.searchUsagesBtn = false
}
}
In my mind when selectednamedropdown is equal to "no_name_selected" and selectedtypedropdown is equal to "no_type_selected" the function should set searchUsagesBtn to true and when they are not these values, false.
However, the function does not ever seem to be returning true even when these conditions are met. Any ideas why this might be? Thanks for all help
When I run your function like this:
let searchUsagesBtn;
function search(selectednamedropdown, selectedtypedropdown) {
if (
selectednamedropdown === "no_name_selected" &&
selectedtypedropdown === "no_type_selected"
) {
searchUsagesBtn = true;
} else {
searchUsagesBtn = false;
}
}
search("no_name_selected", "no_type_selected");
console.log("button: ", searchUsagesBtn);
I get button: true in console log. So maybe your inputs in this function are not a strings.
The issue was around how JavaScript treats properties within functions. The function was storing the new value and old value of the first property and not any values of the second property. The solution involved making 2 functions to test the strings in each property. Thanks for all assistance
I've just been working on a ExtJS script and I have a ComboBox which has
allowBlank = false
and
forceSelection = true
I have an item in the list which acts as a default message which has a display text
Please select...
and no value
''
When I run validate on the ComboBox I get true
No idea why?
According to the documentation when
allowBlank = false
the validation is forced to check for value.length > 0
So I have done my own test in the JS Console
>> if (thisForm.controlManager.controlArray[2].allowBlanks) { if (thisForm.controlManager.controlArray[2].length >= 0) { true; } false; } else { if (thisForm.controlManager.controlArray[2].length > 0) { true; } false; }
and it returned false
So I thought it might a bug in validate method so I tried doing this
>> thisForm.controlManager.controlArray[2].validateValue('')
and got this as a result true
Any one have any kind of idea of what I might be doing wrong or if anything else needs set to get this validate to return false when value is ''.
PS. I've also tried this
>> thisForm.controlManager.controlArray[2].validateValue(' ')
and got the correct result which is false. This made me very confused as I would normally expect '' and ' ' to return the same value in validation.
I know that a workaround would be to set my value to ' ' but I would rather get it working with ''.
Thanks
I just so happened to end up grappling with this same issue, and after some looking around, managed to find a solution which does not require overriding Extjs's standard functionality.
Basically, there is a 'validator' config option for descendents of Ext.form.field.Text which allows programmers to specify a custom validation function for a component (see here).
Basically, your validator function gets called at the start of getErrors() and is evaluated before the rest of the field's standard validation. The validator function takes one argument (the value) and must return either true if the value is valid or an error message string if it is not.
The following config ended up working for my case:
validator: function (value) {
return (value === '/*Your emptytext text*/') ? "blankText" : true;
}
You have to use the emptyText configuration
Ext have this code for validate fields:
validate : function(){
if(this.disabled || this.validateValue(this.processValue(this.getRawValue()))){
this.clearInvalid();
return true;
}
return false;
}
and getRawValue is defined like this:
getRawValue : function(){
var v = this.rendered ? this.el.getValue() : Ext.value(this.value, '');
if(v === this.emptyText){
v = '';
}
return v;
}
so, if the value is equal to the empty text, the returned value is ''
I am using dijit.form.DateTextBox to update my date field.
<form:input id="date_id" name="date_field" path="createDate"
dojoType="dijit.form.DateTextBox"
disabled="false" constraints="{datePattern:'dd/MM/yyyy hh:mm:ss.SS'}"
invalidMessage="invalid" promptMessage="invalid"
lang="en-us" required="true"/>
now, suppose If my 'createDate' value is '05/01/2012 21:10:17.287', but it is displaying as '05/01/2012 12:00:00.00' in date text box.
Due to which, while editing this field, I'm not able to keep it as it was.
Is there anyway I can retain that time part '21:10:17.287'.
Kindly suggest.
(This solution will work for above Dojo 1.6 versions )
The default DateTextBox overrides the old value when setting a new one. This means that the time context is lost while setting the value. If you want to make this possible, you will have to extend the default behavior of the _setValueAttr function of DateTextBox since this is the setter of the value field.
This is how you could do this:
declare("custom.DateTextBox", [DateTextBox], {
_setValueAttr: function(value, priorityChange, formattedValue) {
if(value !== undefined){
if(typeof value == "string"){
value = stamp.fromISOString(value);
}
if(this._isInvalidDate(value)){
value = null;
}
if(value instanceof Date && !(this.dateClassObj instanceof Date)){
value = new this.dateClassObj(value);
}
}
if (value != null && this.value != null) {
value.setHours(this.value.getHours());
value.setMinutes(this.value.getMinutes());
value.setSeconds(this.value.getSeconds());
value.setMilliseconds(this.value.getMilliseconds());
}
this.value = value;
this.inherited(arguments);
}
});
What happens here is pretty easy, the first thing I do is parsing the new value to a valid Date. Before replacing the original value I'm copying the time fields (hours, minutes, seconds and milliseconds).
I also made a JSFiddle to demonstrate this.
If I have an expression {{ x }} and x is undefined or null, then how can I display a placeholder for it?
I provided one solution in my answer, but I would like to know what other ways there are.
Maybe, also for placeholder for promises.
{{ counter || '?'}}.
Just pure javascript. || can be used as default value. Since it would be different empty messages in each, a generalized directive would not be suitable for many cases.
If you want to apply a different class to empty ones, that's also built-in:
<div ng-class="{empty: !counter}" ng-bind="counter || ?"></div>
I would do it like this, but maybe there is a better way:
angular.module('app').filter('placeholdEmpty', function(){
return function(input){
if(!(input == undefined || input == null)){
return input;
} else {
return "placeholder";
}
}
});
and then use {{ x | placeholdEmpty}}
I do it with ng-show, like this:
<strong>{{username}}</strong>
<span class="empty" ng-show="!username">N/A</span>
Sure, it adds a lot more elements to my view that I might be able to handle differently. I like though how easy it is to clearly see where my placeholder/empty values are, and I can style them differently as well.
Implement default filter:
app.filter('default', function(){
return function(value, def) {
return (value === undefined || value === null? def : value);
};
});
And use it as:
{{ x | default: '?' }}
The advantage of the filter solution over {{ x || '?'}} is that you can distinguish between undefined, null or 0.
Implementing default-ish filters works, but if you're using only numbers you can use angular's own number filter
If the input is null or undefined, it will just be returned. If the
input is infinite (Infinity or -Infinity), the Infinity symbol '∞' or
'-∞' is returned, respectively. If the input is not a number an empty
string is returned.
{{ (val | number ) || "Number not provided"}}