在 Angularjs 中显示带有图标和自定义消息的错误

Question

最近我发现了一个网站，它有非常简洁的错误显示方式，我想在我的网站上实现同样的方法，但无法通过 Angularjs 找到实现它的方法。

我一进入下一个字段就出现错误。

Answer 1

对于字段上的红色框，您可以使用 ng-invalid 和 ng-touched class 并为它们构建特定的 css 规则。

ng-invalid表示该字段未填写好。 ng-touched表示该字段已被用户触摸。

css class 例子

const myApp = angular.module("myApp", []);

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

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

<body ng-app="myApp">
<form>
<input type="text" required name="input1" ng-model="model1">
<input type="text" required name="input2" ng-model="model1">
</form>
</body>

要获得包含反馈图标 (!) 的清晰结果，您可以使用 myForm.myInputName.$invalid && myForm.myInputName.$dirty

检查 bootstrap 与 ngClass 的组合

对于消息，您必须像解释的那样使用来自 formController 的输入 here 并使用弹出窗口库为每个可能的错误添加一条消息。

bootstrap的完整示例：

const myApp = angular.module("myApp", []);

.error-message {
  display: block !important;
  margin-top: 30px !important;
  margin-left: -28px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<body ng-app="myApp">
  <form name="myForm" class="col-xs-8">
    <div class="form-group has-feedback " ng-class="{'has-error': myForm.input2.$invalid && myForm.input1.$touched}">
      <label class="control-label" for="inputError2">Required input</label>
      <input class="form-control" required type="text" required name="input1" ng-model="model1">
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
  <div class="popover bottom error-message" ng-if="myForm.input1.$error.required && myForm.input1.$touched"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Required</h3> 
  </div>
  </span>
    </div>
    <div class="form-group has-feedback" ng-class="{'has-error': myForm.input2.$invalid && myForm.input2.$touched}">
      <label class="control-label" for="inputError2">Required input</label>
      <input class="form-control" required type="text" required name="input2" ng-model="model1">
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true">
      <div class="popover bottom error-message" ng-if="myForm.input2.$error.required && myForm.input2.$touched"> 
  <div class="arrow"></div> 
  <h3 class="popover-title">Required</h3> 
  </div>
  </span>
    </div>


  </form>
</body>

在 Angularjs 中显示带有图标和自定义消息的错误

Showing error with icon and custom message in Angularjs

html

css

error-handling

frontend

angularjs