[email protected] UI에 오류 메시지가 표시되지 않음

Question

aurelia 유효성 검사 패키지가 0.6.0에서 0.14.0으로 업데이트되었습니다. 이전에는 입력 필드와 가장 가까운 레이블에 오류 메시지가 표시됩니다. 패키지를 최신 버전으로 업데이트 한 후에는 레이블에 오류 메시지가 표시되지 않습니다. ..

<form id="loginForm" class="form" role="form"> 
        <div class="row"> 
         <div class="form-group col-md-6"> 
          <input class="form-control" value.bind="userName" type="text" id="userName" name="username" t="[placeholder]Account.UserName" /> 
          <label t="Account.UserName" for="userName" class="control-label">User Name</label> 

         </div> 
        </div> 

        <div class="row"> 
         <div class="form-group col-md-6"> 
          <input id="txtPassword" class="form-control" type="password" value.bind="password" name="password" t="[placeholder]Account.Password" /> 
          <label for="txtPassword" t="Account.Password" class="control-label">Password</label> 
         </div> 
        </div>      
        <div class="form-group"> 
         <button id="btnLogin" class="btn btn-material-teal btn-toolbar" disabled.bind="validationController.errors.length" 
           click.delegate="login()" t="Account.Login">Log in</button> 

       </form> 

ValidationRules .ensure ('사용자 이름') 요구() .ensure ('암호') 요구() CSTE 연구진 (이); this.validationController.validate(). catch (() => {});

Answer 1

동일한 문제가있어 렌더링 할 유효성 검사 정보가 전달되는 방식이 변경되었습니다.

error 유효성 확인 개체는 이제 result 개체입니다. 따라서 렌더러에서 error을 result으로 대체해야합니다.

다음의 차이는 이전 버전에서 this.controller.validate() 지금 당신이 확인해야하는 상대로 valid 속성을 가진 result 객체는, 또한, 검증 객체의 array를 반환하고, 검증에 있습니다.

자세한 내용은 here입니다.

Answer 2

체크 아웃 아우렐 리아 유효성 검사 문서 페이지에있는 부트 스트랩 양식 렌더러 : http://aurelia.io/hub.html#/doc/article/aurelia/validation/latest/validation-basics/8

이 양식의 각 입력 요소 옆에 오류를 표시하는 가장 좋은 방법입니다.

이 같은 가져올해야합니다 :

import { inject } from 'aurelia-dependency-injection'; 
import { ValidationControllerFactory, ValidationRules } from 'aurelia-validation'; 
import { BootstrapFormRenderer } from '../common/bootstrap-form-renderer'; 

@inject(ValidationControllerFactory) 
export class YourClassName { 

    constructor(validationControllerFactory) { 
    this.validationCtrl = validationControllerFactory.createForCurrentScope(); 
    this.validationCtrl.addRenderer(new BootstrapFormRenderer()); 
    } 
} 

ValidationRules 
    .ensure('fieldname').required() 
    .ensure('anotherfield').required.minlength(3).maxlength(20) 
    .on(this); 

당신은 당신이로 가져올해야하기 때문에, 전체 응용 프로그램이 액세스 할 수있는 위치에 BootstrapFormRenderer에 대한 코드를 저장할 수 있습니다 유효성 검사가 필요한 모든 뷰 모델