完全控制PaperInput验证 [英] Taking total control of PaperInput validation

查看:160
本文介绍了完全控制PaperInput验证的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm using PaperInput and like the feel. But, is there a way to do the validation using my own logic? For instance, in some cases a pattern match is not enough to determine the error I'd like to display. An example would be I want the PaperInput to specify an item which can only be added once, so the validation would do a lookup in some model map and if input.inputValue is not present it is valid, otherwise invalid.

  <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 。我不认为这是它的工作原理,但是有办法实现这一点吗?

So, I would like to be able to implement bool aliasIsValid() and set @observable String aliasError when validation is invalid. I do not think this is how it works, but is there a way to achieve this?

推荐答案

Polymer.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', [""]);
    }
  }
}

元素失去焦点从HTML元素删除 validateImmediately ,而改用(未测试) on-change p>



To validate only when the input element loses focus remove validateImmediately from the HTML element and use the on-change event instead (not tested).

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

我在 https://github.com/dart-lang/core-elements/pull/102 ,使此方法可以直接在Dart中使用,下一次更新

I added a comment at https://github.com/dart-lang/core-elements/pull/102 to make this method available directly in Dart with the next update.

< core-input> 的文档声明支持HTML5约束验证API。有关详细信息,请参阅
https:// developer .mozilla.org / zh-CN / docs / Web /指南/ HTML / HTML5 / Constraint_validation

The documentation of <core-input> states that the HTML5 constraint validation API is supported. For more information see https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/Constraint_validation

这篇关于完全控制PaperInput验证的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆