처음에는 유효하지만 이후에는 적용되지 않습니다

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;