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

Question

I am using Angular-Messages with Angular-Material v1.0.9. I have an md-dialog inside which I have a form with fields created with 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 are used to display form errors. The problem is that when I use both required and pattern messages, they are sometimes shown and sometimes not. It worked properly when there was no regexp check. The scenario is for example:

1. I have a field which needs to be a number. I enter wrong value, e.g. a text - error message is displayed.
2. I delete value from field so that it's empty. Now required error should be displayed, but it is not. There is a red border informing about the error, though.
3. Now I enter a correct value, e.g. 10 - there is no message as expected.
4. Again, I enter wrong value - now error is displayed.

The above scenario can be repeated and is always true - I need to enter a correct value before error is displayed again.

I've found one workaround which is to add md-auto-hide to container with ng-messages, but now errors are displayed even just after opening the modal window which is not what I want. Have anyone faced a similar issue and found any solution? I'll be grateful for any help.

---

Edit

I've created a fiddle which presents the problem.

https://jsfiddle.net/t3xjrL19/2/

Answer 1

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

Example using ng-if (displaying the div if the field form is touched and there is a validation error)

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

To be honest, I would have thought it would worked as you used it before I saw this question, but maybe you can use my suggestion as a workaround.

I've forked your fiddle to try it and it seems to be working pretty well. Could you check it?

See working forked fiddle

Hope it helps

PS: For your use case, attribute multiple is unnecessary because you will always show one validation message at the same time.