Expression 'command.InternalNotes&validate' is not compatible with the validate binding-behavior.

Hi,

I’m new to this library, using the latest version (both of aurelia framework & validation). My configuration is skeleton navigation typescript with webpack.

My class is configured as following:

import { autoinject, newInstance } from 'aurelia-framework';
import { OrderService } from '../order-service';
import { Router } from 'aurelia-router';
import { ValidationController, ValidationRules  } from 'aurelia-validation';
import { BootstrapFormRenderer  } from '../../resources/validation/bootstrap-form-renderer';

@autoinject
export class OrderSetInternalNotes {

    heading: string = 'Set internal notes';
    command: any = null;

    constructor(private orderService: OrderService,
                private router: Router,
                @newInstance(ValidationController) private validationController: ValidationController) {

        this.validationController.addRenderer(new BootstrapFormRenderer());

    }

    activate(params) {
        this.orderService.getSetInternalNotes(params.id, params.timestamp).then(getSetInternalNotesResponse => {
            if (!getSetInternalNotesResponse.Meta.Success) {
                this.cancel();
            }
            this.command = getSetInternalNotesResponse.Results[0];
            ValidationRules
                .ensure('InternalNotes').required().maxLength(5)
                .on(this.command);
        });
    }

    async execute() {
        let errors = await this.validationController.validate();
        if (errors.length > 0){
            return;
        }
        let getSetInternalNotesResponse = await this.orderService.setInternalNotes(this.command);
        if (!getSetInternalNotesResponse.Meta.Success) {
            return;
        }
        this.close();
    }

    cancel() {
        this.close();
    }

    private close() {
        this.router.navigateToRoute('orderList');
    }

}

the object “command” is gathered from the server and then I’d like to attach the validation when ready.

here is the html

<template>

  <section class="au-animate">
    <h2>${heading}</h2>
    <form role="form" submit.delegate="execute()">
      <div class="form-group">
        <label for="internalNotes">Intenal notes</label>
        <textarea class="form-control"
                  rows="12"
                  value.bind="command.InternalNotes & validate"
                  id="internalNotes"></textarea>
      </div>
      <button type="submit" class="btn btn-primary">Ok</button>
      <button click.delegate="cancel()" class="btn btn-default">Cancel</button>
    </form>
  </section>

</template>

Am I doing something wrong?

Thanks for any advice! Enrico

[fkleuver]

Yep, was able to reproduce this. It goes wrong here:

while (expression instanceof BindingBehavior || expression instanceof ValueConverter) {
  expression = expression.expression;
}

An expression of type BindingBehavior comes in but expression instanceof BindingBehavior evaluates to false.

It appears that 1.7.1 is stored in the lockfile as a redirect from ^1.0.0 and 2.0.0 is stored as a separate entry. The Aurelia libraries depending on aurelia-binding all get their own reference to 1.7.1.

So you get this effect:

aurelia-binding@^2.0.0

aurelia-binding@^1.7.1

aurelia-binding@^1.7.1

aurelia-templating-binding loads its own version to parse the expressions, aurelia-validation also loads its own version to compare the constructors. They’re both 1.7.1 (2.0.0 isn’t even loaded) but different instances, so the constructor functions don’t match up.

1.7.1 being loaded doesn’t really surprise me though - that’s semantic versioning doing its job. I guess the dependency on aurelia-binding needs to be changed to “^1.0.0 | ^2.0.0”.

What does baffle me is that each library loads its own unique instance, even of the same version. At the very least should the same 1.7.1 instance be reused so this sort of thing doesn’t happen. I’d argue that’s a webpack issue, but I’m not entirely sure.

In any case, mismatches in versions like this will always cause problems when using instanceof. The mismatch really has to be avoided.

@bigopon @EisenbergEffect

[bigopon]

@fkleuver bringing this to your attention