ps0604 February 2016

Get rid of pesky borders in ngMessage

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() {
    $scop        

Answers


Sergio Tulentsev February 2016

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)" 


Walfrat February 2016

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.

Post Status

Asked in February 2016
Viewed 2,213 times
Voted 5
Answered 2 times

Search




Leave an answer