ngRequired 未在表单字段上设置 $error 属性答案

【问题标题】：ngRequired not setting $error property on the form fieldngRequired 未在表单字段上设置 $error 属性
【发布时间】：2019-04-03 17:08:20
【问题描述】：

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

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

有人见过吗？

【问题讨论】：

你在设置registration.typeId后尝试过$scope.apply()
不，我有@NegiRox，但我可以试一试。
我认为存在一些问题，因为一旦您设置了标志，它将填充错误。看我下面的答案。
那些双重否定太疯狂了。当typeId 为不 2 时，控件不可见。当typeId 不时需要该控件 2. 因此当它不可见时需要该控件。
@georgeawg 你完全明白 - 我也必须处理好这个问题。这是漫长的一天，我想我离一切都太近了！ :D

标签： javascript angularjs validation

【解决方案1】：

最后，答案是在周围的div 上使用ng-if，而在input 上只使用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 被填充并且标签被弹出。

【讨论】：

【解决方案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>

【讨论】：

这基本上是我的设置，但如果它不是必需的，它也被隐藏了。注意周围的div 上的ng-hide。
意味着如果不需要，您需要隐藏该 div ？