Get rid of pesky borders in ngMessage

Question

In this plunk I have a form with two fields, each validated with ngMessage, where the error message appears when the user tabs out of the field, or the form is submitted.

The issue is that if the message is shown and then hidden (because the problem was fixed) the borders are still shown.

Try tabbing out of a field, then entering a value, you will see only borders in the error message.

How to get rid of these borders?

HTML

<body ng-app="ngMessagesExample" ng-controller="ctl">
  <form name="myForm" novalidate ng-submit="submitForm()">
  <label>
    Enter Aaa:
    <input type="text"
           name="aaa"
           ng-model="aaa"
           required ng-blur="aaaBlur()" />
  </label>

  <div ng-show="showAaa || formSubmitted" 
      ng-messages="myForm.aaa.$error" 
      style="color:red;background-color:yellow;border:1px solid brown">
    <div ng-message="required">You did not enter a field</div>
  </div>

  <br/>
  <label>
    Enter Bbb:
    <input type="text"
           name="bbb"
           ng-model="bbb"
           ng-minlength="2"
           ng-maxlength="5"
           required ng-blur="bbbBlur()" />
  </label> 
<br/><br/>
  <div ng-show="showBbb || formSubmitted" ng-messages="myForm.bbb.$error" 
  style="color:red;background-color:yellow;border:1px solid brown">
    <div ng-message="required">You did not enter a field</div>
  </div>
  <br/>
  <button style="float:left" type="submit">Submit</button>
</form>

</body>

Javascript

var app = angular.module('ngMessagesExample', ['ngMessages']);
app.controller('ctl', function ($scope) {

  $scope.formSubmitted = false;
  $scope.showAaa = false;
  $scope.showBbb = false;

  $scope.submitForm = function() {
    $scope.formSubmitted = true;

  };


   $scope.aaaBlur = function() {
    $scope.showAaa = true;
  };

   $scope.bbbBlur = function() {
    $scope.showBbb = true;
  };


});

score 3 · Accepted Answer · answered Feb 08 '16 at 13:03

3

It's because you show the div (showAaa=true) but there's no content. Solution? Don't show the div. :)

<div ng-show="!myForm.aaa.$valid && (showAaa || formSubmitted)"

answered Feb 08 '16 at 13:03

Sergio Tulentsev

226,338
43
373
367

Another option if the intent is to always have the `div` be present (e.g. to prevent the accordion effect when showing and hiding), is to use `ng-class` and a ternary expression to enable and disable specific CSS classes. See here: http://stackoverflow.com/a/21970785/1990536 – Rai Feb 08 '16 at 13:11

score 0 · Answer 2 · answered Feb 08 '16 at 13:10

In which field do you have the problem ? Both or only the 2nd one ?

I see that in the 2nd field you fixed a min and max length. If they're not right, you don't have any ng-message to handle them, but your field will be in error, so you'll end up with the red border and no message.

By the way : you can use [formName].[fieldName].$touched instead of using your native onblur.

Get rid of pesky borders in ngMessage

2 Answers2