angularjs - Get rid of pesky borders in ngMessage -
in plunk have form 2 fields, each validated ngmessage, error message appears when user tabs out of field, or form submitted.
the issue if message shown , hidden (because problem fixed) borders still shown.
try tabbing out of field, entering value, see borders in error message.
how 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 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 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; }; });
it's because show div (showaaa=true) there's no content. solution? don't show div. :)
<div ng-show="!myform.aaa.$valid && (showaaa || formsubmitted)"
Comments
Post a Comment