rxweb icon indicating copy to clipboard operation
rxweb copied to clipboard

@disable decorator not working if we refer to functions in conditional expression

Open jure123 opened this issue 3 years ago • 1 comments

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]

jure123 avatar Sep 20 '21 09:09 jure123

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

fhawkes avatar Oct 25 '21 11:10 fhawkes