dart - 完全控制 PaperInput 验证

标签 dart dart-polymer paper-elements core-elements

我正在使用 PaperInput 并且喜欢这种感觉。但是,有没有办法使用我自己的逻辑进行验证?例如,在某些情况下,模式匹配不足以确定我想要显示的错误。一个例子是我希望 PaperInput 指定一个只能添加一次的项目,因此验证将在某些模型映射中进行查找,如果 input.inputValue 不存在,则它是有效的,否则无效。

  <paper-input floatingLabel
               id="alias-input"
               validate="{{aliasIsValid}}"
               type="text"
               error="{{aliasError}}"
               label="Person Alias (eg: King, Eldest Son, Mooch, etc.)"
               required
               ></paper-input>

所以,我希望能够实现 bool aliasIsValid() 并在验证无效时设置 @observable String aliasError 。我不认为这是它的工作原理,但有没有办法实现这一目标?

最佳答案

聚合物.dart <= 0.16.x

import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:core_elements/core_input.dart';

@CustomTag('app-element')

class AppElement extends PolymerElement {
  AppElement.created() : super.created() {}

  void inputHandler(Event e) {
    var inp = ($['custom'] as CoreInput);
    // very simple check - you can check what you want of courxe
    if(inp.inputValue.length < 5) {
      // any text is treated as validation error
      inp.jsElement.callMethod('setCustomValidity', ["Give me more!"]);
    } else {
      // empty message text is interpreted as valid input
      inp.jsElement.callMethod('setCustomValidity', [""]);
    }
  }
}

仅在输入元素失去焦点时进行验证,删除 validateImmediately来自 HTML 元素并使用 on-change事件代替(未测试)。

<paper-input id="custom" on-input="{{inputHandler}}" validateImmediately></paper-input>

我在 https://github.com/dart-lang/core-elements/pull/102 添加了评论在下次更新时直接在 Dart 中使用此方法。
<core-input> 的文档声明支持 HTML5 约束验证 API。有关更多信息,请参阅
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation

关于dart - 完全控制 PaperInput 验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25730326/

相关文章:

polymer - 纸卷页眉面板不起作用

Polymer 1.0 <paper-toast> 出现在 <paper-drawer-panel> 后面

dart - 当子 Widget 调用名为 Push 时,Widget 正在重建

dart - 如何创建带有 polymer Dart 的自定义ul元素,当添加 child 时,该元素会触发添加事件和删除事件?

flutter - 如何在Dart中将utf8字符串转换为LATIN1?

dart - 如何将 "scrollTarget"传递到 "core-list"/滚动

html - 如何使用具有不同文件结构的 Dart Polymer?

Dart PaperDropdownMenu 获取所选项目

dart - 如何知道哪个屏幕在顶部(事件/安装)

dart - 更改日期格式化程序的语言环境