AngularJS:如何在控制器中手动将输入设置为$ valid？

Question

使用TokenInput插件并使用AngularJS内置的formController验证.

现在我正在尝试检查字段是否包含文本,然后将字段设置为有效(如果有).使用插件的问题是它创建了自己的输入,然后是一个用于stlying的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;
  }
};

当TokenInput输入并传入对象时,我正在运行capabilityValidation函数.

编辑:

在我的输入上找到ng-model做了东西并获得自动完成结果,这就是为什么我不能使用ng-valid来工作,因为它基于模型.

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

我没有编写这个自动完成实现,是否有另一种方法可以访问ng-model attr并将模型函数移动到其他地方？

Answer 1

您无法直接更改表单的有效性.如果所有后代输入都有效,则表单有效,如果没有,则表示不是.

你应该做的是设置输入元素的有效性.像这样;

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

现在输入(以及表单)无效.您还可以查看哪个错误导致失效.

addItem.capabilities.errors.youAreFat == true;

Answer 2

上面的答案并没有帮助我解决我的问题.经过长时间的搜索后,我碰到了这个局部解决方案.

我终于用这个代码解决了我的问题,手动将输入字段设置为ng-invalid(设置为ng-valid,将其设置为'true'):

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

Answer 3

我遇到了类似问题的这篇文章.我的修复是添加一个隐藏字段来保存我的无效状态.

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

在我的情况下,我有一个可空的布尔,一个人必须选择两个不同的按钮之一.如果他们回答是,则将一个实体添加到集合中,并且按钮的状态会发生变化.在所有问题都得到解答之前(每个对中的一个按钮都有一个单击),表单无效.

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>