dart - 验证另一个输入时未看到一个输入上的验证错误

Question

我正在使用https://pub.dartlang.org/packages/drails_validator来验证数据模型。生成的错误然后由纸张输入元素的错误消息属性显示。

给定以下代码

。镖

@PolymerRegister('language-form')
class LanguageForm extends PolymerElement
{
  @Property( notify: true )
  Language language = new Language( );

  String topic = '';
  IronIcon validationIcon;
  IronCollapse collapse;

  @property
  String errorMsg = '';

  LanguageForm.created() : super.created();

  @reflectable
  void onInputHandler(event, [_]) {
    //String property = toLowerCamelCase( event.currentTarget.id );
    String id = event.currentTarget.id;

    switch ( property ) {
      case 'first':
        updateValidationErrors(language, $[id] as PaperInput, id);
        break;

      case 'second':
        updateValidationErrors(language, $[id] as PaperInput, property);
        break;
    }
  }


  void updateValidationErrors( dynamic data, var element, String property ) {
    //PaperInput element = elemen as PaperInput;
    print( 'property| $property' );
    print( 'element | $element' );
    print( 'element runtime | ${element.runtimeType}' );

    switch ( element.runtimeType ) {
      case PaperInput:
        var validationErrors = doGetValidationResult( data ).errors;
        print( 'valErrors ${validationErrors[property]}' );

        if ( validationErrors[property] != null ) {
          element
            ..errorMessage = '${validationErrors[property].join( ' | ' )}'
            ..invalid = true;
        } else {
          element
            ..errorMessage = ''
            ..invalid = false;

          break;
        }
        break;

      case PaperItem:
      //elem = element as PaperItem;
        break;
    }
  }


  @reflectable
  void toggler( event, [_] ) {
    toggleCollapse( collapse );
  }

    void ready( ) {
    topic = this.dataset['topic'];
    collapse = $['collapse'] as IronCollapse;
    validationIcon = $['fe-icon'] as IronIcon;
  }

}


void updateValidationErrors( dynamic data, var element, String property ) {
  //PaperInput element = elemen as PaperInput;
  print( 'property| $property' );
  print( 'element | $element' );
  print( 'element runtime | ${element.runtimeType}' );

  switch ( element.runtimeType ) {
    case PaperInput:
      var validationErrors = doGetValidationResult( data ).errors;
      print( 'valErrors ${validationErrors[property]}' );

      if ( validationErrors[property] != null ) {
        element
          ..errorMessage = '${validationErrors[property].join( ' | ' )}'
          ..invalid = true;
      } else {
        element
          ..errorMessage = ''
          ..invalid = false;

        break;
      }
      break;

    case PaperItem:
    //elem = element as PaperItem;
      break;
  }
}

@validable
class Language extends JsProxy {
  bool isValid = false;

  @reflectable
  @Length( min: 2, customDescription: 'At least 2 letters required' )
  @Matches( r"^[a-zA-Z][a-zA-Z '-]*$", customDescription: 'First language is invalid' )
  String first = '';

  @reflectable
  @Matches(
      r"^\s*$|^[a-zA-Z][a-zA-Z '-]*$", customDescription: 'Second language is invalid' )
  String second = '';
}

.html

<dom-module id = "language-form">
  <style include = "reg-styles">

  </style>

  <template>
    <div class = "layout vertical main-container">
      <div class = "layout horizontal center-justified">
        <required-icon></required-icon>
        <paper-button
            raised
            active
            toggles
            on-tap = "toggler"
            class = "bold">Language
          <iron-icon icon = ""
                     id = "fe-icon"></iron-icon>
        </paper-button>
      </div>

      <iron-collapse id = "collapse">
        <div class = "layout vertical body">
          <paper-input
              required
              auto-validate
              label = "First *"
              value = "{{language.first}}"
              on-input="onInputHandler"
              id = "first"></paper-input>

          <paper-input
              required
              auto-validate
              label = "Second"
              pattern = "[[regex]]"
              id = "second"
              value = "{{language.second}}"
              on-input="onInputHandler"></paper-input>

        </div>

      </iron-collapse>
    </div>
  </template>

</dom-module>

验证第一语言会显示红色错误消息，但一旦在第二语言中获得焦点，来自第一语言的错误消息就会消失。

请看下图：

我希望即使失去焦点也能显示 First 中的错误消息。

谢谢

Answer 1

从每个元素中删除自动验证属性。