Question

基本上我想表明需要输入，但是当用户在输入中输入文本时，它会向他们显示输入有效（将边框从红色变为绿色）

我遇到麻烦，这条线总是假的：

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

这是我的自定义CSS：

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

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

这是我的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@example.com" 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>

Answer 1

我能想到的快速解决方案是

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

或直接插值的东西，如：

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

Answer 2

错误的可能解释。

Hyphen in attribute value causing AngularJs validation break

将表单名称从custom-form更改为customerForm，它开始工作。

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@example.com" 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>

如果表单无效，如何使用ng-class更改类？

2 个答案: