时间戳

首页 > 解决方案 > ngRequired 未在表单字段上设置 $error 属性

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

问题描述

我有一个基于表单上另一个字段的值有条件地可见和有条件地需要的控件。

<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有required验证器，它在. 同样有趣的是我有另一个有效的控件，唯一的区别是；另一个控件只是标记。dischargeYearform$errorng-requiredrequired

有人见过这个吗？

标签： javascriptangularjsvalidation

解决方案

最后，答案是ng-if在周围使用div，只是required在input. 这很有效，因为它在不需要时从 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>

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

推荐阅读