CODEWITHSUNDEEP
javascripthtmlcssangularjs
doct03
doct03

Reputation: 317

How do I change a class with ng-class if the form is not invalid?

Basically I want to show that an input is required, but when the user enters text into the input it will show them that the input is valid (changes border from red to green)

I'm having trouble with this line always being false:

ng-class="contact-form.name.$invalid ? 'input-success' : 'input-error'"

Here is my custom CSS:

.input-error {
    border-right: solid 5px #d2322d !important;
}

.input-success {
    border-right: solid 5px #5cb85c !important;
}

And here is my HTML:

       <div class="col-lg-4">
            <h4>Contact Us</h4>
            <form name="contact-form" novalidate>
              <div class="form-group">
                <label for="name" class="form-control-label">Name: </label>
                <input class="form-control form-control-success" type="text" name="name" id="name" placeholder="First & Last Name" ng-model="name" ng-class="contact-form.name.$invalid ? 'input-success' : 'input-error'" required>
              </div>
              <div class="form-group">
                <label for="email" class="form-control-label">Email: </label>
                <input class="form-control" type="email" name="Email" id="email" placeholder="[email protected]" ng-model="email">
              </div>
              <div class="form-group">
                <label for="comments" class="form-control-label">Comments: </label>
                <textarea rows="4" class="form-control" type="text" name="Comments" id="comments" placeholder="Let us know what you think!" ng-model="comments"></textarea>
              </div>
              <div class="form-group">
                <label for="why" class="">Reason for contact: </label>
                <select class="form-control" id="why" ng-model="reason">
                  <option>Specific dietary restriction</option>
                  <option>Other</option>
                </select>
              </div>
              <div class="form-group">
                <button class="btn btn-default btn-info pull-right">Send</button>
              </div>
            </form>
          </div>

Upvotes: 0

Views: 6911

Answers (2)

Sreekanth
Sreekanth

Reputation: 3130

Possible explanation of the error.

Hyphen in attribute value causing AngularJs validation break

Changed the form name from custom-form to customerForm , it started working.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {}
]);
.input-error {
  border-right: solid 5px red !important;
}
.input-success {
  border-right: solid 5px green !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <div class="col-lg-4">
      <h4>Contact Us</h4>
      <form name="contactForm" novalidate>
        <div class="form-group">
          <label for="name" class="form-control-label">Name:</label>
          <input class="form-control form-control-success" type="text" name="name" id="name" placeholder="First & Last Name" ng-model="name" ng-class="contactForm.name.$invalid ?  'input-error':'input-success'" required>
        </div>
        <div class="form-group">
          <label for="email" class="form-control-label">Email:</label>
          <input class="form-control" type="email" name="Email" id="email" placeholder="[email protected]" ng-model="email">
        </div>
        <div class="form-group">
          <label for="comments" class="form-control-label">Comments:</label>
          <textarea rows="4" class="form-control" type="text" name="Comments" id="comments" placeholder="Let us know what you think!" ng-model="comments"></textarea>
        </div>
        <div class="form-group">
          <label for="why" class="">Reason for contact:</label>
          <select class="form-control" id="why" ng-model="reason">
            <option>Specific dietary restriction</option>
            <option>Other</option>
          </select>
        </div>
        <div class="form-group">
          <button class="btn btn-default btn-info pull-right">Send</button>
        </div>
      </form>
    </div>

  </div>
</div>

Upvotes: 0

LoganRx
LoganRx

Reputation: 382

The quick fix I can think of would be

ng-class={'input-success': contact-form.name.$valid, 'input-error': contact-form.name.$invalid}

Or something with direct interpolation like:

class="input-{{contact-form.name.$invalid ? 'error' : 'success'}}"

Upvotes: 2

Related Questions