폴리머의 새로운 용지 입력/용지 입력 데코레이터 구성 요소의 유효성 확인 문제

Question

최근 용지 입력 변경과 용지 입력 데코레이터 (polymer v0.5.1)의 도입에 따라 이제 입력을 구현하는 데 문제가 있습니다. 확인. 예를 들어, 최근에 변경하기 전에는 사용자 정의 '속성 편집기'폴리머 요소 (즉, 구성 가능한 아이콘, 구성 가능한 입력 컨트롤 (유형 용지 드롭 다운 메뉴 또는 일반 입력) 및 관련 요소를 결합한 요소를 구성했습니다. 옵션 단위 값 입력 제어 (용지 유형 드롭 다운 메뉴 또는 용지 입력)) 매우 기능적이었습니다. 위에서 언급 한 커스텀 요소 내에 정규 표현식 패턴이 제공 될 때 활성화되는 템플릿 중 하나를 보여주는 코드의 작은 하위 집합입니다. 이것은 잘 작동되었습니다

<template if="{{controlType == 'input' && controlValidPattern != null}}"> 
    <paper-input id="{{controlId}}" value="{{inputValue}}" label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" pattern="{{controlValidPattern}}" error="{{controlErrorMsg}}" required="{{controlInputRequired}}" maxlength="{{controlMaxLength}}"> 
    </paper-input> 
</template> 

그럼 내가 다시 필요에 따라 행동 할 요소를 소모/호스트에 대한 사용자 지정 이벤트를 트리거 된 inputValueChanged 감시자 기능을 구현했다.

최종 목표는 물론 현재 입력이 유효하지 않은 경우 (사용자가 입력 할 때 '생방송'이 발생할 수 있고 컨트롤에 초기 입력이로드 될 때 나타날 수 있음) 컨트롤에 대한 유효성 오류 메시지를 표시하는 것입니다 값), 또는 더 나은 사용자가 처음부터 잘못된 데이터를 입력하지 못하게합니다. 어쨌든 'inputValueChanged'함수는 입력이 유효하지 않으면 발사되는 것을 방지하고 사용자가 컨트롤을 벗어날 때까지 (블러 등) 해당 이벤트를 발생시키지 않아야합니다. 나는 종이 요소의 새로운 버전을 사용하여 다시 작동 시키려고 노력하면서 조금 놀았지만 (아래 예제를보십시오), 여전히 어려움이 있습니다. 위에 설명 된 원하는 동작을 사용하여 정규 표현식 패턴 일치를 얻는 예제를 친절하게 제공 할 수 있습니까?

<template if="{{controlType == 'input' && controlValidPattern != null}}"> 
    <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" error="{{controlErrorMsg}}" isInvalid="{{invalidEntry}}"> 
      <input is="core-input" id="{{controlId}}" value="{{inputValue}}" committedValue="{{committedValue}}" pattern="{{controlValidPattern}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}"> 
    </paper-input-decorator> 
</template> 

미리 감사드립니다.

Answer 1

입력 값이 변경 될 때 입력의 유효성을 검사하려면 paper-input-decorator의 isInvalid 속성을 입력의 validity.valid 속성에 바인딩해야합니다. 즉.

당신이 할 수있는이 경우 : 사전에 입력의 ID가없는 경우

<template is="auto-binding"> 
    <paper-input-decorator label="Number" floatingLabel 
         error="is not a number" 
         isInvalid="{{!$.input.validity.valid}}"> 
    <input id="input" is="core-input" pattern="\d*"> 
    </paper-input-decorator> 
</template> 

당신이 input 이벤트를 수신하고 핸들러에서 isInvalid을 설정할 수 있습니다, 아래의 코멘트에 응답하려면 입력 이벤트를 수신하고 핸들러에서 isInvalid을 설정

<template is="auto-binding"> 
    <paper-input-decorator id="decorator" label="Number" floatingLabel 
        error="is not a number"> 
    <input is="core-input" pattern="\d*" on-input="{{inputAction}}"> 
    </paper-input-decorator> 
</template> 
<script> 
    var scope = document.querySelector('template[is=auto-binding]'); 
    scope.inputAction = function(e) { 
    var d = document.getElementById('decorator'); 
    d.isInvalid = !e.target.validity.valid; 
    } 
</script> 

라이브 예 :로 http://jsbin.com/hocugi/1/edit

Answer 2

Yvonne의 대답에 추가 기능을 추가 했으므로 필자는 원본 게시물에서 언급 한 사용자 지정 구성 요소의 고정 코드 스 니펫을 게시하여 이제는 지정된 입력 유형 (들)과 함께 용지 입력 데코레이터를 활용할 것이라고 생각했습니다. 정규 표현식 등 :

<template if="{{controlType == 'input' && controlEntryType != null}}"> 
    <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" value="{{inputValue}}" error="{{controlErrorMsg}}"> 
      <input is="core-input" id="{{controlId}}" type="{{controlEntryType}}" value="{{inputValue}}" committedValue="{{committedValue}}" step="{{controlNumberStep}}" min="{{controlNumberMin}}" max="{{controlNumberMax}}" on-input="{{inputAction}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}"> 
    </paper-input-decorator> 
</template> 

<template if="{{controlType == 'input' && controlValidPattern != null}}"> 
    <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" value={{inputValue}} error="{{controlErrorMsg}}"> 
      <input is="core-input" id="{{controlId}}" pattern="{{controlValidPattern}}" preventInvalidInput value="{{inputValue}}" committedValue="{{committedValue}}" on-input="{{inputAction}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}"> 
    </paper-input-decorator> 
</template> 

<template if="{{controlType == 'input' && controlEntryType == null && controlValidPattern == null}}"> 
    <paper-input-decorator label="{{controlLabel}}" floatingLabel="{{controlFloatingLabel}}" value="{{inputValue}}" error="{{controlErrorMsg}}"> 
      <input is="core-input" id="{{controlId}}" type="text" value="{{inputValue}}" committedValue="{{committedValue}}" on-input="{{inputAction}}" maxlength="{{controlMaxLength}}" required="{{controlInputRequired}}" size="{{controlWidth}}"> 
    </paper-input-decorator> 
</template> 

inputAction: function(e, detail, sender) { 
    // Reset paper-input-decorator's validity based on current user input 
    sender.parentElement.isInvalid = !sender.validity.valid; 
}, 

committedValueChanged: function(oldVal, newVal) { 
    /* Event designed to listen for paper-input value changes */ 

    // When the input is valid, fire a custom event that can be listened to by the host element (i.e. via 'on-property-change') 
    // Pass to the listener an object representing the property that was changed by this element 

    if(this.shadowRoot.querySelector("#" + this.controlId).validity.valid) { 
      this.fire('property-change', {newProperty: this.propertyChanged()}); 
    } 
},