AngularJS: как вручную установить вход в $valid в контроллере?

С помощью TokenInput плагин и с помощью AngularJS встроенный formController проверки.

прямо сейчас я пытаюсь проверить, содержит ли поле текст, а затем установить поле действительным, если это так. Проблема с использованием плагина заключается в том, что он создает свой собственный вход, а затем ul+li для stlying.

у меня есть доступ к addItem (formname) и мои возможности в контроллере, мне просто нужно установить его $действительный.

разметки.

<form class="form-horizontal add-inventory-item" name="addItem">
     <input id="capabilities" name="capabilities" token-input data-ng-model="inventoryCapabilitiesAutoComplete" data-on-add="addCapability()" data-on-delete="removeCapability()" required>
     <div class="required" data-ng-show="addItem.capabilities.$error.required" title="Please enter capability."></div>
</form>

JS.

$scope.capabilityValidation = function (capability) {
  if (capability.name !== "") {
    addItem.capabilities.$valid = true;
    addItem.capabilities.$error.required = false;
  } else {
    addItem.capabilities.$valid = false;
    addItem.capabilities.$error.required = true;
  }
};

я запускаю функцию capabilityValidation, когда TokenInput что-то вводит и передает в объект.

EDIT:

выяснил, что ng-model на моем входе делает вещи и получает результаты автозаполнения, поэтому я не могу заставить ng-valid работать, так как он основан на модели.

$scope.inventoryCapabilitiesAutoComplete = {
  options: {
    tokenLimit: null
  },
  source: urlHelper.getAutoComplete('capability')
};

Я не писал эту реализацию автозаполнения, есть ли другой способ сделать это, где у меня был бы доступ к ng-model attr и переместить функцию модели в другое место?

4 83
javascript angularjs validation

4 ответа:

вы не можете напрямую изменить действительность формы. Если все входные данные потомков действительны, форма действительна, если нет, то это не так.

то, что вы должны сделать, это установить действительность входного элемента. Вот так;

addItem.capabilities.$setValidity("youAreFat", false);

теперь вход (и поэтому форма) является недопустимым. Вы также можете увидеть, какая ошибка вызывает недействительность.

addItem.capabilities.errors.youAreFat == true;
135

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

Я наконец-то решил свою проблему с этим кодом, чтобы установить поле ввода вручную в NG-invalid (чтобы установить в ng-valid, установите его в 'true'):

$scope.myForm.inputName.$setValidity('required', false);
51

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

<input type="hidden" ng-model="vm.application.isValid" required="" />

в моем случае у меня был нулевой bool, который человек должен был выбрать одну из двух разных кнопок. если они отвечают "Да", объект добавляется в коллекцию и состояние кнопки изменяется. Пока все вопросы не получат ответы (одна из кнопок в каждой из пар имеет щелчок), форма недействительна.

vm.hasHighSchool = function (attended) { 
  vm.application.hasHighSchool = attended;
  applicationSvc.addSchool(attended, 1, vm.application);
}

<input type="hidden" ng-model="vm.application.hasHighSchool" required="" />
<div class="row">
  <div class="col-lg-3"><label>Did You Attend High School?</label><label class="required" ng-hide="vm.application.hasHighSchool != undefined">*</label></div>
  <div class="col-lg-2">
    <button value="Yes" title="Yes" ng-click="vm.hasHighSchool(true)" class="btn btn-default" ng-class="{'btn-success': vm.application.hasHighSchool == true}">Yes</button>
    <button value="No" title="No" ng-click="vm.hasHighSchool(false)" class="btn btn-default" ng-class="{'btn-success':  vm.application.hasHighSchool == false}">No</button>
  </div>
</div>
17

Это очень просто. Например : в вас JS контроллер использовать это:

$scope.inputngmodel.$valid = false;

или

$scope.inputngmodel.$invalid = true;

или

$scope.formname.inputngmodel.$valid = false;

или

$scope.formname.inputngmodel.$invalid = true;

все работы для меня для различного требования. Нажмите, если это решит вашу проблему.

0