if.bind中的Aurelia驗證和對象屬性不起作用

Question

我使用aurelia-validation插件進行輸入驗證時遇到問題。

我想驗證的屬性綁定是一個對象的屬性（有時爲null），它位於此對象的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> 

和我的視圖模型構造：

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); 

但後來我需要設置我的對象是一個空對象而不是null，並且在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只有大約一週的經驗，這可能是一個有缺陷的例子，但希望有人發現這有用。

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) }); 
    } 
} 

正在調用這樣的方法：

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)); 
    } 
}