聚合物:重置纸张输入以正确清空而不触发验证

时间:2016-11-02 20:15:11

标签: html validation dom polymer

我使用Polymer支持Web技术,考虑到我重置paper-input元素的方式,我感到有些困惑。

当我重新打开表单时,我不想要这个:

enter image description here

但是这个:

enter image description here

我的工作正常,我只是要求确认我的实施并要求最佳实践,如果它不是最好的方法。

上下文

  • 我有自动验证的纸张输入,其值必需
  • 我想在应用程序生命周期中多次使用它。
  • 我在自定义元素中使用它。
  • 当我点击“保存”时,我使用数据绑定为我的后端提供用户输入。按钮,它也是同一个自定义元素的一部分。
  • 我们可以打开和关闭此元素。

用例

  • 我输入了我的输入文件
  • 点击按钮,元素隐藏,我的数据按预期正确保存
  • 我重新打开我的元素(只是变得可见),并执行以下操作:
    • 禁用输入字段的自动验证没有错误消息,因为此字段 required 则不能为空
    • 我的纸张输入值重置为空字符串
    • 启用自动验证
  • 等等

我的问题

当我使用空字符串重置paper-input值时,我会避免自动验证以显示错误消息"需要一些文字!"通过使用绑定到属性muteValidation的名为auto-validate的中间属性:

DOM:

  <paper-input
      label="Type your word"
      always-float-label
      placeholder="English"
      required
      auto-validate$="[[muteValidation]]"
      error-message="Needs some text!"
      value="{{word.english}}">
  </paper-input>

脚本:

  open: function() {
    this._setOpened(true);
    this.create();
  },

  create: function() {
    this._setOpened(true);
    this.muteValidation = false;
    this.set('word.english', '');
    this.muteValidation = true;
    Polymer.dom(this).classList.add('open');
  },

对我而言,使用属性muteValidation只是为了简单地重置我的字段听起来有点奇怪。 我的代码是对还是完全邪恶?

0 个答案:

没有答案