最近我遇到一个网站，它有非常简洁的错误显示方式，我想在我的网站上实现相同的方式，但无法弄清楚通过 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>要获得包含反馈图标 (!) 的清晰结果，您可以检查 bootstrap使用 myForm.myInputName.$invalid && myForm.myInputName.$dirty
对于消息，您必须像解释的那样使用来自 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 - 在 Angularjs 中显示带有图标和自定义消息的错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43957275/