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

debugcn 发表于 Dev

Vibhoo Mishra

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

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

朱利安·塔辛

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

ng-invalid表示该字段没有很好地填充。ng-touched表示该字段已被用户触摸。

css类示例

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>

要获得包括反馈图标 (!) 在内的干净结果，您可以使用以下命令检查引导程序与 ngClass 的结合myForm.myInputName.$invalid && myForm.myInputName.$dirty

对于消息，您必须使用来自 formController 的输入，如此处所述，并使用 popover lib 为每个可能的错误添加一条消息。

引导程序的完整示例：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。