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>

和我的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);

然后我需要将我的对象设置为空对象而不是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));
    }
}

if.bind中的Aurelia验证和对象属性不起作用

2 个答案: