Why is the angular form validation applying incorrect CSS styles?

Question

I need help understanding form validation with angularjs 1.5.

I have a form with a First Name field which is required. The Last Name is NOT required. When I click in Last Name and then don't type anything and click out, I see that it shows a Red Border. I would expect a green border.

I have css styles for ng-valid and ng-touched to show a green border and ng-invalid and ng-touched to show a red border. If I just click inside Last Name and then click out, then i see that the css style for ng-invalid ng-touched is shown and I see that a red border is shown. Why do I see a red border when the field is NOT required and the error object is blank.

(function(){
  'use strict';
  var app = angular.module('demoApp', ['ui.router']);
  app.controller('SignupController', SignupController);
  SignupController.$inject=['$rootScope'];
  function SignupController(){
    var ctrl = this;
    ctrl.userName = "";
    ctrl.lastName = "";
  }
})();

.ng-invalid .ng-touched  {
  border: 2px solid red;
}
.ng-valid .ng-touched  {
  border:2px solid green;
}

<!DOCTYPE html>
<html ng-app='demoApp'>
<head>
  <title>Forms {{10+20}}</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/1.0.0-beta.2/angular-ui-router.js"></script>

  <script src="script.js"></script>
  <link rel="stylesheet"  href="style.css">
</head>
<body ng-controller="SignupController as ctrl">
  <h1>World of Forms{{10+20}}</h1>

  <fieldset>
    <legend>Signup</legend>
    <form name="signupForm" novalidate>
    <br/>First Name*: <input type="text" required id="userName" name="userName" ng-model='userName'>
    <span ng-if='signupForm.userName.$error.required && signupForm.userName.$touched'>Name is Required</span>
   
    <br/>
    <br/>Last Name: <input type="text" id="lastName" name="lastName" ng-model='lastName'>
    <span>Error:{{signupForm.lastName.$error | json}}</span>
    </form>
  </fieldset>
</body>
</html>

Yes, I also printed "signupForm.lastName.$error.required" . It shows a blank object. If the $error had the property required in it, it would show it with the current code. — stalwalk
– stalwalk, Commented Feb 1, 2017 at 14:42

AHAY · Accepted Answer · 2017-02-02 00:08:47Z

2

I think your problem lies within your css:

.ng-invalid .ng-touched  {
  border: 2px solid red;
}

If you touch the field, no matter what, your field will get the ng-touched class applied to it, which makes it have the red border.

Perhaps try this instead:

.ng-invalid.ng-touched  {
  border: 2px solid red;
}

.ng-valid.ng-touched  {
  border:2px solid green;
}

edited Feb 2, 2017 at 0:08

answered Feb 2, 2017 at 0:00

AHAY

1911 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Phil Over a year ago

This is because the <form> tag gets the ng-invalid class as well. OP should do the same for .ng-valid .ng-touched

Collectives™ on Stack Overflow

Why is the angular form validation applying incorrect CSS styles?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related