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


92

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

现在,我正在尝试检查该字段是否包含文本,然后将其设置为有效(如果包含)。使用该插件的问题是它创建了自己的输入,然后创建了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并将模型函数移至其他位置吗?


1
因为您的插件正在创建自己的输入,并且您已经编写了一个函数来进行自己的验证,所以为什么不只使用自己的$ scope属性进行验证: <div ... data-ng-show="capabilities_error" ...> 换句话说,您是否/需要使用FormController是有原因的呢?
Mark Rajcok

2
由于我所有其他表单都在使用它,因此我想保留它所提供的控件。插件创建的输入实际上在我的原始输入中设置了值,然后我需要在我的验证中对其进行检查,但是当有输入值时,它不会更新formController。
Christopher Marshall

我故意缩短了标记以隔离输入。我还有很多相同形式的输入。
Christopher Marshall

1
好的。您是否尝试addItem.capabilities.$valid = true和/或适当地将addItem.capabilities。$ error.required设置为true或false?
Mark Rajcok

我都尝试过这两个。我将更新问题以向您显示。$ valid和$ error.required在控制器的断点上显示为undefined,但addItem.capabilities仍具有数据。
Christopher Marshall

Answers:


150

您不能直接更改表单的有效性。如果所有后代输入均有效,则该格式有效,否则无效。

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

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

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

addItem.capabilities.errors.youAreFat == true;

1
如果capabilities是变量怎么办?我有一个包含输入名称的数组,我想在数组内部循环并将它们设置为无效:/
lightalex14年

1
您所说的变量是什么意思?它直接绑定到表单本身,而不是表单中的值。它使用表单的name属性和输入的id属性。这是由设置的值不同ngModel
UmurKontacı

11
我找到了解决方案,但这就是我的意思:$scope.addItem['myVariableName'].$setValidity("youAreFat", false);
lightalex

在此之后,似乎某些输入字段在更改或模糊时不再生效
Leonardo

4
在Angular 1.4.7上,我必须在此代码前加上$ scope ..$scope.addItem.capabilities.$setValidity("youAreFat", false);
Graham T

60

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

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

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

3
我做了同样的事情,效果很好。但是现在我有一些重新验证同一字段的问题。它不会更改为更改状态,这非常麻烦。我使用ng-model-options =“ {updateOn:'submit'}”来验证点击按钮。有什么想法吗?
OliverKK 2014年

1
@OliverKK你需要调用$setValiditytrue作为每当输入有效的第二个参数。
2015年

10
使用rootscope没有任何意义,而应该是范围
Ryan M

1
我尝试了类似的解决方案,但是发现的问题是,如果我随后尝试更改表单中控件的值,则它仍然无效。在我的情况下,控件是内部选择的指令。如果我为指令设置了无效值(即ng-form),则无法删除该无效状态。
Naomi

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>

2

这很简单。例如:在您的JS控制器中使用以下命令:

$scope.inputngmodel.$valid = false;

要么

$scope.inputngmodel.$invalid = true;

要么

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

要么

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

所有的作品对我来说都是不同的要求。如果可以解决您的问题,请点击。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.