I am using https://pub.dartlang.org/packages/drails_validator to validate a data model. The errors generated are then displayed by the error-message property of a paper-input element.
Given the following codes
.dart
@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>
Validating First language displays the red error messages, but as soon as focus is achieved in Second language the error message from First language disappears.
Please see graphics below:
I would like the that the error message in First be displayed even when focus is lost.
Thanks
