Проверка невидимых и отключенных полей в AngularJS

Есть ли способ сделать условную проверку в AngularJS? Проблема, которую я пытаюсь решить, - это в основном список переключателей, которые включают/отключают входы на основе выбора. На следующем изображении изображена проблема. Первый ввод текста принимает только буквы, второй - только числа. Оба имеют ng-pattern и ng-required. (Рабочий пример на Plunker)

Что бы я хотел достичь, так это то, что при выборе переключателя проверка будет отключена для соответствующего поля ввода.

Я надеялся, что установка ng-disabled в true приведет к тому, что недопустимое состояние будет установлено для элементов управления формы, о которых идет речь, но, увы, это не так.

Единственное решение, которое я нашел до сих пор, заключается в очистке ввода при выборе другого выбора и установке ng-required в false. Есть ли разумный способ достижения этого или единственное решение полностью удалить элементы из DOM?

Ответы

Ответ 1

Попробуйте эту директиву:

.directive('disableChildren', function() {
  return {
    require: '^form',
    restrict: 'A',
    link: function(scope, element, attrs,form) {
      var control;

      scope.$watch(function() {
        return scope.$eval(attrs.disableChildren);
      }, function(value) {
        if (!control) {
          control = form[element.find("input").attr("name")];
        }
        if (value === false) {
          form.$addControl(control);
          angular.forEach(control.$error, function(validity, validationToken) {
            form.$setValidity(validationToken, !validity, control);
          });
        } else {
          form.$removeControl(control);
        }
      });
    }
  }
})

DEMO

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

реализация директивы для исключения скрытого элемента ввода из проверки ($ addControl)

Я думаю, мы могли бы каким-то образом объединить эти директивы, чтобы создать общую директиву, которая может использоваться повсюду в зависимости от того, как мы оцениваем выражение.

Ответ 2

Как предполагает мармит, ng-required может принимать выражение, чтобы вы могли сказать что-то вроде

<input name="numeric" ng-required="alpha.disabled == false" />
<input name="alpha" ng-required="numeric.disabled == false" />

Я не уверен, как проверить состояние отключенного - это должно это сделать, но я только когда-либо создавал этот эффект, проверяя состояние флажка.

Я понимаю, что это сообщение Лазаря, но, надеюсь, это поможет другим.

Ответ 3

Я думаю, что вы неправильно используете ng. Вы строго кодировали его как истинный для обоих текстовых входов, но на самом деле ng-требуемый для этих входов должен быть установлен только в том случае, если переключатель отмечен галочкой.