4

私はPaperInputを使用していますが、その感触が気に入っています。しかし、独自のロジックを使用して検証を行う方法はありますか? たとえば、表示したいエラーを特定するのにパターン マッチだけでは不十分な場合があります。例として、PaperInputで 1 回だけ追加できるアイテムを指定するようにします。そのため、検証では一部のモデル マップでルックアップが行われ、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を設定できるようにしたいと考えています。これがどのように機能するかはわかりませんが、これを達成する方法はありますか？

4

1 に答える 1

2

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

入力要素がフォーカスを失った場合にのみ検証するに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を参照してください。

于 2014-09-09T18:09:38.753 に答える