javascript - ngRequired 未在表单字段上设置 $error 属性

Question

我有一个控件，该控件根据表单上另一个字段的值有条件地可见并且有条件地需要。

<div class="form-group" ng-hide="vm.registration.typeId !== 2">
  <div class="row">
    <div class="col-md-offset-1 col-md-10">
      <label class='col-md-3' for="dischargeYear">Discharge Year*</label>
      <div class="col-md-7">
        <input type="text" id="dischargeYear" name="dischargeYear" 
               class="form-control large-text-form main-input"
               ng-model="vm.registration.dischargeYear"
               ng-required="vm.registration.typeId !== 2"
               ng-class="{'has-error': form.dischargeYear.$touched && form.dischargeYear.$invalid}">
      </div>
    </div>
  </div>
</div>

但是，即使 $validators 在 form 的 dischargeYear 上具有 required 验证器，它$error 中从未出现错误。同样有趣的是我有另一个可以工作的控件，唯一的区别是 ng-required；另一个控件只是标记required。

有人见过这个吗？

Answer 1

最后，答案是在周围的 div 上使用 ng-if ，并在 上使用 required 属性输入。这是有效的，因为它会在不需要时从 DOM 中删除该元素，并在需要时重新编译它。

<div class="form-group" ng-if="vm.registration.typeId === 2">
  <div class="row">
    <div class="col-md-offset-1 col-md-10">
      <label class='col-md-3' for="dischargeYear">Discharge Year*</label>
      <div class="col-md-7">
        <input type="text" id="dischargeYear" name="dischargeYear" 
               class="form-control large-text-form main-input"
               ng-model="vm.registration.dischargeYear"
               required
               ng-class="{'has-error': form.dischargeYear.$touched && form.dischargeYear.$invalid}">
      </div>
    </div>
  </div>
</div>

这导致 $validators 和 $error 被填充并且标签被弹出。