Angularjs 如果存在多个输入，如何将has error应用于表单组内的单个输入

我使用angularjs和

$invalid

将

添加到我的表单组中。出现错误。。问题是我的一个表单组中有多个并排输入

<div class="form-group">
  <div class="col-sm-6">
    <label for="location">Location</label>
    <select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
  </div>
  <div class="col-sm-6">
    <label for="name">Rack Size</label>
     <input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
  </div>
</div>

如果当前的
name=size
无效，则会对整个表单组应用
.has error
，这可能会让最终用户感到困惑。有什么办法可以做到这一点吗


将.has错误应用于特定输入
重新安排我的表格
稍微布局一下，使每个输入都位于其自己的表单组中，但仍保留
并排看
简单的答案是，您试图在HTML中加入太多的逻辑。查看如何创建角度指令，这些指令在后台实现逻辑或在控制器中执行，并设置要检查的
范围的状态

Angular的一个关键规则是不要在HTML中放入逻辑
 我的方法是为每个输入元素创建表单组。另外，我相信您不需要内部
，因为您可以将该类与表单组连接起来，并获得相同的结果

<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
    <label for="location">Location</label>
    <select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
</div>

<div class="form-group col-sm-6" ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
    <label for="name">Rack Size</label>
     <input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>

</div>


位置
机架尺寸

如果在不改变布局的情况下这样做有帮助，请告诉我，只需在每个div中使用
ng class
sintax和
col
class即可。就像这样：

<div class="form-group">
  <div class="col-sm-6"  ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
    <label for="location">Location</label>
    <select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
  </div>
  <div class="col-sm-6"  ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
    <label for="name">Rack Size</label>
     <input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
  </div>
</div>


位置
机架尺寸

<div class="form-group">
  <div class="col-sm-6"  ng-class="{ 'has-error': rackForm.location.$invalid && rackForm.location.$dirty }">
    <label for="location">Location</label>
    <select class="form-control input-lg" name="location" ng-model="newRack.location" ng-options="location as location.name for location in locations" placeholder="Locations" required></select>
  </div>
  <div class="col-sm-6"  ng-class="{ 'has-error': rackForm.size.$invalid && rackForm.size.$dirty }">
    <label for="name">Rack Size</label>
     <input type="number" class="form-control input-lg" name="size" ng-model="newRack.size" min="1" max="48" required>
  </div>
</div>