javascript - Angular-Messages sometimes aren't shown when used with Angular-Material -


i using angular-messages angular-material v1.0.9. have md-dialog inside have form fields created ng-repeat:

<form name="modal.dynamicform" flex="80" layout="column">     <md-input-container ng-repeat="field in modal.model.fields">         <ng-form name="innerform">             <label>{{ field.label }}*</label>             <input type="text" ng-model="field.value" name="{{ field.name }}" ng-pattern="field.pattern" required />             <div ng-messages="innerform[field.name].$error">                 <div ng-message="required">{{ 'fieldrequired' | translate }}</div>                 <div ng-message="pattern">{{ field.patternerror }}</div>             </div>         </ng-form>     </md-input-container> </form> 

angular-messages used display form errors. problem when use both required , pattern messages, shown , not. worked when there no regexp check. scenario example:

  1. i have field needs number. enter wrong value, e.g. text - error message displayed.
  2. i delete value field it's empty. required error should displayed, not. there red border informing error, though.
  3. now enter correct value, e.g. 10 - there no message expected.
  4. again, enter wrong value - error displayed.

the above scenario can repeated , true - need enter correct value before error displayed again.

i've found 1 workaround add md-auto-hide container ng-messages, errors displayed after opening modal window not want. have faced similar issue , found solution? i'll grateful help.


edit

i've created fiddle presents problem.

https://jsfiddle.net/t3xjrl19/2/

your problem should disappear if conditionally show <div ng-messages .../> using both ng-if or ng-show.

example using ng-if (displaying div if field form touched , there validation error)

<div ng-messages="innerform[field.name].$error" ng-if="innerform[field.name].$touched && innerform[field.name].$error" multiple> ... </div> 

to honest, have thought worked used before saw question, maybe can use suggestion workaround.

i've forked fiddle try , seems working pretty well. check it?

see working forked fiddle

hope helps

ps: use case, attribute multiple unnecessary because show 1 validation message @ same time.


Comments

Popular posts from this blog

sequelize.js - Sequelize group by with association includes id -

android - Robolectric "INTERNET permission is required" -

java - Android raising EPERM (Operation not permitted) when attempting to send UDP packet after network connection -