0

paper-input への最近の変更と paper-input-decorator (ポリマー v0.5.1) の導入に続いて、入力検証の実装に問題が発生しています。たとえば、最近の変更の前に、カスタムの「プロパティ エディター」ポリマー要素 (つまり、構成可能なアイコン、構成可能な入力コントロール (タイプ paper-dropdown-menu または通常の入力) を本質的に組み合わせた要素)、および関連する要素を構築していました。オプションの単位値入力コントロール (タイプ paper-dropdown-menu または paper-input)) であり、非常に機能的でした。以下は、前述のカスタム要素内のテンプレートの 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>

あなたが貸すことができるアドバイス/例を事前に感謝します!

4

2 に答える 2

0

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()});
    }
},
于 2014-11-19T18:59:13.453 に答える