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