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在required的{{1}}上具有dischargeYear验证器，它在form中也不会出错。有趣的是，我还有另一个有效的控件，唯一的区别是$error；另一个控件只是标记ng-required。

有人见过吗？

Answer 1

最后，答案是在周围的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>

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

Answer 2

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="">

<form name="myForm">

Click here to make the input field required:

<input type="checkbox" ng-model="setRequired"><br><br>

<input name="name" ng-model="name" ng-required="setRequired">

<h1 ng-if="myForm.name.$invalid">The input field cannot be empty</h1>

</form>

</body>
</html>

ngRequired不要在表单字段上设置$ error属性

2 个答案: