ifure.bind内のAureliaの検証とオブジェクトのプロパティが機能しない

Question

aurelia-validationプラグインを使用して入力検証に問題があります。

私が検証したいプロパティー・バウンド・バインディングは、オブジェクトのプロパティー（時にはヌル）であり、このオブジェクトのif.bindの内側にあります。ここで

が私のコードです：

<div class="well" if.bind="selectedBody"> 
    <input type="text" class="input-sm" class="form-control" value.bind="selectedBody.name & validate" required pattern="[a-z]+[aA-zZ|0-9]*"> 
    <ul if.bind="controller.errors"> 
     <li repeat.for="error of controller.errors"> 
      ${error.message} 
     </li> 
    </ul> 
</div> 

と私のViewModelコンストラクタ：

constructor(private ea : EventAggregator, private controllerFactory: ValidationControllerFactory) { 
    this.controller = controllerFactory.createForCurrentScope(); 
    ValidationRules.ensure('selectedBody.name').required().withMessage("Sprite name is required").on(this); 
} 

私はで検証ルールを交換しようとした：

ValidationRules.ensure('name').required().withMessage("Sprite name is required").on(this.selectedBody); 

が、その後、私は設定する必要があります私のオブジェクトはヌルではなく空のオブジェクトになり、divが隠された後で検証が機能しなくなり、再度表示されます。

Answer 1

誰かが私がaurelia gitterに私の問題を解決する助け

ソリューションは、プロパティ変更リスナーメソッド内での検証ルールを移動することでした（私は非常にお勧め！）：私は、コントローラをリセット

selectedBodyChanged(oldval, newval) { 
    if (this.controller.errors) { 
    this.controller.reset(); 
    } 
    ValidationRules.ensure('name').required().withMessage("Sprite name is required").on(this.selectedBody); 
} 

直前のselectedBodyオブジェクトによって表示された検証エラーをフラッシュします。

Answer 2

あなたの自己回答の質問は私には役に立ちました。私はStackOverflowポイントを持っていないので、コメントはブロックされていますので、これを回答として投稿する必要があります。

私は同じ問題を抱えていて、あなたの投稿を見つけたときに答えを探していました。あなたの研究に基づいて、私はいくつかのイベントを試してみました。

私は、作業と完全なAureliaの例を見つけるのが難しいので、私は代替案を提供するためにこれを投稿しています。 AureliaとTypeScriptを使用して約1週間の経験があるだけで、これはおそらく欠陥のある例ですが、うまくいけば誰かがこれを便利に思っています。

import { HttpClient } from 'aurelia-fetch-client'; 
import { NewInstance, inject } from 'aurelia-framework'; 
import { Tool } from './Tool'; 

@inject(NewInstance.of(HttpClient)) 
export class ToolingService { 

    constructor(private http: HttpClient) { 
     http.configure(config => { 
      config.useStandardConfiguration() 
       .withBaseUrl('/api/Tooling/Tool/'); 
     }); 
    } 

    getById(id: string): Promise<Tool> { 
     return this.http.fetch(id) 
      .then(result => result.json() as Promise<Tool>) 
      .catch(error => console.log(error)); 
    } 
} 

：このようなメソッドを呼び出している

import { inject } from 'aurelia-framework'; 
import { Tool } from './Tool'; 
import { ToolingService } from './ToolingService'; 
import { ValidationControllerFactory, ValidationRules, ValidationController } from 'aurelia-validation'; 

@inject(ValidationControllerFactory, ToolingService) 
export class ToolDetail { 
    public tool: Tool; 
    public controller: ValidationController; 

    constructor(private validationControllerFactory: ValidationControllerFactory, private toolingService: ToolingService) { 
     this.controller = validationControllerFactory.createForCurrentScope(); 
    } 

    attachValidation(tool: Tool) { 
     ValidationRules.ensure('toolType').required().on(this.tool) 
      .ensure('size').required().on(this.tool) 
      .ensure('code').required().maxLength(15).on(this.tool) 
      .ensure('alternateCode').required().maxLength(15).on(this.tool); 

     return tool; 
    } 

    activate(parms, routeConfig) { 
     return this.toolingService.getById(parms.id) 
      .then(tool => this.tool = tool) 
      .then(tool => { this.attachValidation(this.tool) }); 
    } 
}