Не требуется устанавливать свойство $ error в поле формы

#javascript #angularjs #validation

#javascript #angularjs #проверка

Вопрос:

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

 <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 amp;amp; form.dischargeYear.$invalid}">
      </div>
    </div>
  </div>
</div>

Но, даже несмотря на то, что $validators имеет required валидатор на dischargeYear на form , в $error нем никогда не было ошибки. Что также интересно, у меня есть другой элемент управления, который работает, и единственное отличие в том ng-required , что другой элемент управления просто помечается required .

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

1. вы пробовали использовать $scope.apply() после установки registration.typeId

2. У меня нет @NegiRox, но я могу попробовать.

3. я думаю, что есть какая-то проблема, потому что, как только вы установите флаг, он будет заполнен для ошибки. смотрите мой ответ ниже.

4.Эти двойные отрицания сумасшедшие. Элемент управления не виден, когда typeId он не 2 установлен. Управление требуется, когда typeId равно не 2. Следовательно, элемент управления требуется, когда он не виден.

5. @georgeawg вы были абсолютно правы — с этим мне тоже пришлось разобраться. Это был долгий день, и я думаю, что я был слишком близок ко всему! 😀

Ответ №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 amp;amp; 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>

1. В принципе, у меня есть такая настройка, но если она не требуется, она также скрыта. Обратите внимание на ng-hide окружающее div .

2. означает, что вам нужно скрыть этот div, если это не требуется?