rxweb
rxweb copied to clipboard
@disable decorator not working if we refer to functions in conditional expression
The following example of @disable decorator in a model class is not working, because in conditional expression it checks a function instead of a direct property:
export class User {
@prop()
isChecked: boolean;
@disable({conditionalExpression: function () { return this.checkFunction == true; }})
@prop()
fullName: string;
public get checkFunction(): boolean {
return this.isChecked;
}
}
If we change this.isChecked property it won't have any effect on the @disable conditinal expression that evaluates this.checkFunction == true, but it would work if conditional expression checked this.icChecked == true.
Full example on: https://stackblitz.com/edit/angular-z5p584-jj87me?file=src%2Fapp%2Fuser.model.ts
If we call the function anywhere in html template (for example <div>Is checked: {{ user.checkFunction }}</div>
) it will be reactive.
Is there any workaround for this problem, or is this a bug that all props with @disable decorator should be refreshed after any form value change?
Sometimes it's useful to put all the conditional logic in a fuction so it can be reusable on multiple model properties, especially if one condition depends on many properties.
Package version
@rxweb/[email protected]
I'm running into this as well. My assumption is that the conditionalExpression on each form prop would be checked anytime a value changed to see if it could be disabled now.
I also assumed that running refreshDisable would force them all to run and it doesn't