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

Используя плагин TokenInput и используя встроенную проверку встроенного formController в формате AngularJS.

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

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

Разметка.

<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;
  }
};

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

EDIT:

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

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

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

Ответы

Ответ 1

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

Что нужно сделать, так это установить правильность входного элемента. Таким образом,

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

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

addItem.capabilities.errors.youAreFat == true;

Ответ 2

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

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

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

Ответ 3

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

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

В моем случае у меня был nullable 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>