93

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

现在我正在尝试检查该字段是否包含文本，然后将字段设置为有效。使用插件的问题是它创建了自己的输入，然后创建了一个 ul+li 用于 stlying。

我可以访问控制器中的 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 并将模型函数移动到其他地方？

4

5 回答 5

153

您不能直接更改表单的有效性。如果所有后代输入都有效，则表单有效，否则无效。

您应该做的是设置输入元素的有效性。像这样；

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

现在输入（以及表单）无效。您还可以查看导致失效的错误。

addItem.capabilities.errors.youAreFat == true;
于 2013-03-16T09:50:01.953 回答
62

上面的答案并没有帮助我解决我的问题。经过长时间的搜索，我遇到了这个部分解决方案。

我终于用这段代码解决了我的问题，将输入字段手动设置为 ng-invalid（设置为 ng-valid，将其设置为“true”）：

$scope.myForm.inputName.$setValidity('required', false);
于 2014-03-26T15:24:35.043 回答
18

我遇到了这篇带有类似问题的帖子。我的解决方法是添加一个隐藏字段来为我保存无效状态。

<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>
于 2015-03-18T00:13:16.897 回答
2

这很简单。例如：在你的 JS 控制器中使用这个：

$scope.inputngmodel.$valid = false;

或者

$scope.inputngmodel.$invalid = true;

或者

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

或者

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

所有适合我的不同要求。如果这解决了您的问题，请点击。

于 2018-08-19T16:41:17.727 回答
0

为了让这个适用于日期错误，我必须先删除错误，然后再调用 $setValidity 以将表单标记为有效。

delete currentmodal.form.$error.date;
currentmodal.form.$setValidity('myDate', true);
于 2020-12-14T23:14:16.110 回答