検証は初めてではありますが、それ以降ではありません

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;