ngRequired не устанавливает свойство $ error в поле формы - PullRequest
0 голосов
/ 03 апреля 2019

У меня есть элемент управления, который является условно видимым и условно необходим на основе значения другого поля в форме.

<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 на dischargeYear на form, в $error никогда не возникает ошибка. Что еще интересно, у меня есть еще один работающий элемент управления, и единственное отличие - ng-required; другой элемент управления просто помечает required.

Кто-нибудь видел это раньше?

Ответы [ 2 ]

1 голос
/ 04 апреля 2019

В итоге ответом было использование 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 и появлению метки.

0 голосов
/ 03 апреля 2019

<!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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...