0

Let's say I have the following input field:

    <div ng-messages="myForm.name.$error">
      <div ng-message="required">Please enter a name</div>
    </div>

The issue is that the ng-messages element takes up space in the DOM, so it's affecting the positioning of the other form elements. I was expecting that this element would not be added to the DOM until an error was present. Is it the case that the ng-messages element is always present, but the individual ng-message elements are removed and added to the DOM?

I was hoping ng-message would be a good alternative to ng-show/ng-hide, but it seems I'll still have to add ng-show to the ng-messages container to get it to fully disappear until there is an error. Am I missing some more elegant way to use ng-message?

Paul Erdos
  • 1,355
  • 2
  • 23
  • 47

1 Answers1

1

Use ng-if

It won't print until condition is satisfied

like this

<div ng-messages="myForm.name.$error" ng-if="myForm.name.$error">
Anik Islam Abhi
  • 25,137
  • 8
  • 58
  • 80