为 AngularJS 中的无效输入字段实现错误类答案

【问题标题】：Implementing an Error-Class for an invalid input field in AngularJS为 AngularJS 中的无效输入字段实现错误类
【发布时间】：2015-07-19 02:49:39
【问题描述】：

首先是我的 HTML 代码：

<form name="Form" novalidate>
   <div class="form-group has-error has-feedback">
      <input class="form-control" type="text" name="Name" ng-model="item.name" required="" aria-describedby="" />
      <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
      <span class="sr-only">(error)</span>
      <br />
      <div class="has-error has-feedback" ng-show="Form.$submitted || Form.Name.$touched">
         <span ng-show="Form.Name.$error.required">Name is invalid.</span>
      </div>
   </div>

当名称无效时，我只想显示 div 类“has-error has-feedback”和字形图标。我该如何开发它？

【问题讨论】：

ng-show 和 ng-class 可能会有用。他们都采取有条件的。条件是名称输入脏且无效。
我已经添加了一个ng-class="Form.Isin.$error.required ? 'has-error' : 'has-success'，但是当页面加载时，输入框立即变为红色。当我要去下一个输入域时，输入域应该是红色的。我该怎么做？

标签： javascript angularjs validation

【解决方案1】：

如果你想根据它无效显示，你需要这样做：

<div class="has-error has-feedback" ng-show="Form.Name.$invalid">
     <span ng-show="Form.Name.$error.required">Name is invalid.</span>
</div>

字形图标也是如此：

<span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true" ng-show="Form.Name.$invalid"></span>

【讨论】：