Question

我不确定这里缺少什么。当网站最初加载并且我尝试提交空表单时，验证结果中的验证结果正确指示valid == false。然后，我尝试再次在网站上的任何位置进行验证，验证始终返回valid == true。如果我刷新浏览器，它会在第一次运行，但之后不再运行。

在初次尝试时检查我的ValidationController实例（this.validation），bindings已填写。在后续尝试中，bindings为空。

以下是我的验证设置示例。

create.ts

import { autoinject} from "aurelia-framework";
import { ValidationController, ValidationRules } from "aurelia-validation";
import { DefaultValidationControllerFactory } from "../../lib/validation/default-validation-controller-factory";
import { Customer } from "../../lib/models/Customer";

@autoinject
export class CreateForm {
    private validation: ValidationController;

    public customer = new Customer();

    constructor(validationControllerFactory: DefaultValidationControllerFactory) {
        this.validation = validationControllerFactory.createForCurrentScope();
    }

    public attached() {
        ValidationRules
            .ensure((o: Customer) => o.firstName)
            .required()
            .ensure((o: Customer) => o.lastName)
            .required()
            .ensure((o: Customer) => o.facebookName)
            .required()
            .ensure((o: Customer) => o.state)
            .required()
            .on(this.customer);
    }

    public createCustomer() {
        this.isBusy = true;

        return this.validation
            .validate()
            .then(result => {
                if (result.valid) {
                    // ...
                }
            })
            .finally(() => {
                this.isBusy = false;
            });
    }
}

create.html上

<template>
    <div busy.bind="isBusy" class="form content-area">
        <div class="row">
            <div class="col-xs-12 col-sm-6">
                <div class="row">
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>First Name</label>
                            <input value.bind="customer.firstName & validate" type="text" class="form-control" />
                        </div>
                    </div>

                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>Last Name</label>
                            <input value.bind="customer.lastName & validate" type="text" class="form-control" />
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="col-xs-12">
                        <div class="form-group">
                            <label>Email Address</label>
                            <input value.bind="customer.emailAddress & validate" type="text" class="form-control" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

默认验证控制器-factory.ts

import { autoinject } from "aurelia-framework";
import { Validator, ValidationController, ValidationControllerFactory, ValidationRules } from "aurelia-validation";
import { DefaultValidationRenderer } from "./default-validation-renderer";

@autoinject
export class DefaultValidationControllerFactory {
    private validationControllerFactory: ValidationControllerFactory;
    private validationRenderer: DefaultValidationRenderer;

    constructor(validationControllerFactory: ValidationControllerFactory, validationRenderer: DefaultValidationRenderer) {
        this.validationControllerFactory = validationControllerFactory;
        this.validationRenderer = validationRenderer;
    }

    public create(validator?: Validator): ValidationController {
        let validationController = this.validationControllerFactory.create(validator);

        this.setDefaults(validationController);

        return validationController;
    }

    public createForCurrentScope(validator?: Validator): ValidationController {
        let validationController = this.validationControllerFactory.createForCurrentScope(validator);

        this.setDefaults(validationController);

        return validationController;
    }

    private setDefaults(validationController: ValidationController) {
        validationController.addRenderer(this.validationRenderer);
    }
}

默认验证-renderer.ts

import { inject } from "aurelia-dependency-injection";
import { ValidationRenderer, RenderInstruction } from "aurelia-validation";

const ValidationErrorClassName = "validation-error";

@inject(Element)
export class DefaultValidationRenderer implements ValidationRenderer {
    private boundaryElement: HTMLElement;

    constructor(boundaryElement: HTMLElement) {
        this.boundaryElement = boundaryElement;
    }

    public render(instruction: RenderInstruction) {
        for (let item of instruction.unrender) {
            for (let target of item.elements) {
                let messages = target.parentElement.getElementsByClassName(ValidationErrorClassName);

                for (let i = 0; i < messages.length; i++) {
                    let message = messages[i];

                    target.parentElement.removeChild(message);
                }
            }
        }

        for (let item of instruction.render.filter(o => !o.result.valid)) {
            for (let target of item.elements) {
                let message = target.ownerDocument.createElement("div");

                message.classList.add(ValidationErrorClassName);
                message.innerHTML = item.result.message;
                target.parentNode.insertBefore(message, target.nextSibling);
            }
        }
    }
}

Answer 1

问题在于你DefaultValidationControllerFactory。将其替换为：

export class DefaultValidationControllerFactory {

 public static get(container: Container) {
    return new DefaultValidationControllerFactory(container);
  }

  constructor(private container: Container) { }

  public create(validator?: Validator) {
    if (!validator) {
      validator = this.container.get(Validator) as Validator;
    }
    return new ValidationController(validator);
  }

  public createForCurrentScope(validator?: Validator) {
    const controller = this.create(validator);
    controller.addRenderer(new DefaultValidationRenderer());
    this.container.registerInstance(ValidationController, controller);
    return controller;
  }
}

(DefaultValidationControllerFactory as any)['protocol:aurelia:resolver'] = true;

验证是第一次，但不是随后

1 个答案: