Вопросы валидации с новыми компонентами-полимерами для ввода-вывода/бумажного ввода-декоратора

Question

После недавних изменений в бумажном вводе и введении декоратора для подачи бумаги (полимер v0.5.1) у меня теперь возникают проблемы с внедрением ввода Проверка. Например, до недавних изменений я создал собственный полимерный элемент «property-editor» (т.е. элемент, который по существу объединяет конфигурируемый значок, настраиваемый элемент управления вводом (тип выпадающего меню или обычный ввод) и связанный с ним дополнительное управление входным значением единицы измерения (тип выпадающего меню бумаги или ввод бумаги)), и он был очень функциональным. Вот небольшой поднабор кода, показывающий один из шаблонов в вышеупомянутом настраиваемом элементе, который активировался, когда ему была предоставлена ​​регулярная модель выражения. Это работает хорошо:

<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

Чтобы проверить ввод при изменении входного значения, свойство isInvalid на paper-input-decorator должно быть привязано к свойству ввода validity.valid. то есть.

<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()}); 
    } 
},