Validating a computed field

[flcdrg]

I have an existing Aurelia v1 website - https://david.gardiner.net.au/azure-resource-namer/ that I'm working on converting to v2.

The current v1 implementation includes validation on the value displayed in the 'resource name' field. The resource name is a composite of the other fields on the page, but the validation only makes sense to be applied to this value. eg.

I am trying to figure out how to achieve something similar with v2. I've tried using the new validator and pointing it at the 'resourcename' property but it doesn't seem to work (also including using & validate:'change''

Is this supported to validate a 'computed' property, or is there an alternate approach that I could use?

Code from my-app.ts

  constructor(
    @newInstanceForScope(IValidationController) private validationController: IValidationController,
     @IValidationRules validationRules: IValidationRules
  ) {
    this.copyIcon = faCopy;
    this.copiedIcon = faCheckSquare;
    this.copied = false;
    this.instance = 1;
    this.environment = "prod";
    this.workload = "myapp";
    this.message = "msg";
    this.region = 'westus';
    this.selectedResource = { abbrev: 'rg', name: ''};
    this.thingy = 'ah';
    this.resourceNameValid = true;

    validationRules.on(this)
    .ensure('resourceName')
    .required()
    .maxLength(10);
  }

  get resourceName(): string {
    return formatResourceName(this.selectedResource, this.workload, this.environment, this.region, this.instance, this);
  }

code from my-app.html

          <input id="resourceName" type="text" class="form-control has-validation" value.bind="resourceName & validate"
            aria-multiline="false" readonly="" spellcheck="false" tabindex="-1" aria-readonly="true"
            title="resource name" required>

[Sayan751]

Hi @flcdrg, here is a working example for you, if it helps:
https://stackblitz.com/edit/au2-validation-computed?file=package.json,index.ts,src%2Fmy-app.ts,src%2Fmy-app.html

[flcdrg]

Thanks!

That only seems to trigger validation when you click the 'submit' button. Is there a way to make it validate live (eg. as you type in either of the first two fields?)

[Sayan751]

I have updated the example. It needed

    ValidationHtmlConfiguration.customize((options) => {
      options.DefaultTrigger = ValidationTrigger.changeOrFocusout;
    })

Note that the validate binding behaviour is intentionally designed in such a way that it delays the validation feedback to reduce the cognitive load of the user and in turn offers better UX. Roughly speaking, the event based validations are not triggered, if a field is not touched and/or dirty. If the validation is "forced" via the ValidationController#validate, only then all the fields and objects registered with the controller gets validated.

[flcdrg]

Awesome, I think that's it. In my use case there is no 'submit' button so immediate feedback is helpful, but I understand why this isn't the default.