0

随着最近对纸张输入的更改和纸张输入装饰器（聚合物 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>

提前感谢您提供的任何建议/示例！

4

2 回答 2

1

要在输入值更改时验证输入，应将isInvalid属性 on绑定到输入的属性。IE。paper-input-decoratorvalidity.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>

回答下面的评论，如果事先没有输入的id，可以监听input事件并isInvalid在handler中设置：

在这种情况下，您可以侦听输入事件并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

于 2014-11-18T22:45:22.613 回答
0

作为 Yvonne 提供的答案的附加组件，我想我会从我在原始帖子中提到的自定义组件中发布一些固定代码片段，现在使用 paper-input-decorators，两者都具有指定的输入类型（s )、正则表达式模式等：

<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 回答