Aurelia Validation报错：无法解析访问器函数（TypeScript接口场景）

Hey there! Let's get that validation error sorted out. The "Unable to parse accessor function" issue you're seeing happens because Aurelia's Validation parser can't correctly resolve the nested property path in your validation rule—specifically, how you're targeting the client.clientLastName property from your interface-bound model.

Why Your Current Syntax Fails #

Your existing rule uses ValidationRules.ensure((c: Client) => c.client.clientLastName)—but here's the problem: the arrow function's parameter is typed as Client, which doesn't match your view model's structure. Aurelia expects the parameter in the ensure function to represent your view model instance, not the nested ClientDetails object. When it tries to parse this accessor, it can't map the path back to your view model's properties, hence the error.

Correct Validation Rule Syntax #

You have two reliable ways to fix this, depending on your preference:

1. Type-Safe Arrow Function (Recommended for TypeScript)

Make sure the arrow function references your view model's structure directly. Let's assume your view model class looks something like this (adjust the class name to match yours):

export class ClientFormViewModel {
  client: ClientDetails; // Your interface-defined property

  constructor() {
    this.client = {} as ClientDetails; // Initialize the object
    this.setupValidation();
  }

  private setupValidation() {
    ValidationRules
      // Target the nested property from the view model instance
      .ensure((vm: ClientFormViewModel) => vm.client.clientLastName)
      .required() // Add your validation rules here (e.g., required, minLength)
      .on(this); // Bind the rules to this view model
  }
}

If you're inside the view model class, you can even omit the type annotation for brevity (TypeScript will infer it):

ValidationRules
  .ensure(vm => vm.client.clientLastName)
  .required()
  .on(this);

2. String Property Path (Simple & Reliable for Deep Nested Properties)

If you prefer a more straightforward approach (or run into parsing issues with complex arrows), you can use a string path to target the nested property:

ValidationRules
  .ensure('client.clientLastName')
  .required()
  .on(this);

This bypasses the accessor function parsing entirely and directly tells Aurelia which property to validate.

Verify Your View Binding #

Double-check your view to make sure you're binding the validation correctly. For example, if your input is bound to client.clientLastName, your view should include the validation attributes:

<input type="text" value.bind="client.clientLastName & validate">
<div if.bind="validation.errors.has('client.clientLastName')" class="error">
  ${validation.errors.first('client.clientLastName').message}
</div>

Why Basic Forms (Like Login) Worked #

Your login form uses top-level properties (e.g., username, password) where the accessor function (vm) => vm.username is straightforward for Aurelia to parse. The issue only arises with nested properties when the accessor function doesn't correctly reference the view model's structure.

内容的提问来源于stack exchange，提问作者si2030