Question

我正在搜索设置由角度选择指令（https://github.com/machineboy2045/angular-selectize）引起的输入的验证。

问题在于这个指令：

<selectize config="pic.interGermConfig" options="pic.interGermOptions" data-ng-model="pic.interGermFilter"></selectize>

生成此输出：

<selectize config="pic.interGermConfig" options="pic.interGermOptions" data-ng-model="pic.interGermFilter"></selectize>
<div class=“selectize-control”>
 <div class=“selectize-input items not-full”>
      <div data-value=“value” class=“item”>Visual value</div>
      <input type=“text” autocomplete=“off” placeholder=“” />
 </div>
 <div class=“selectize-dropdown multi”>
      <div class=“selectize-dropdown-content”>
           <div data-value=“value” data-selectable class=“option”>Visual value</div>
      </div>
 </div>

此标记：

<input type=“text” autocomplete=“off” placeholder=“” />

没有ng-model指令属性，因此我无法使用带有ngModel require的自定义指令来设置输入有效性。

是否可以以某种方式执行此操作，或者是否可以在控制器内设置输入有效性而不是在指令内？

由于

Answer 1

我找到了满足我需求的解决方案，但我认为这不是最好的方法。

在第一时刻，我尝试在传递给selectize指令的模型上使用$ watch，但这是不允许的，因为ng-model属性被遮挡而且没有传播到新的DOM元素使用选择性。

因此，查看角度选择代码，我发现该指令允许使用ng-required属性（https://github.com/ptesser/angular-selectize/blob/master/dist/angular-selectize.js）。所以我创建了一个函数来检查模型并设置控制器中的错误，然后我将此函数传递给ng-require。

<selectize config="pic.interGermConfig" options="pic.interGermOptions"
           data-ng-model="pic.interGermFilter"
           data-ng-required="pic.checkSelectizeRequire(pic.interGermFilter, 'germs')">
</selectize>

这就是功能

function checkSelectizeRequire(array, filter){

  array = array === undefined ? [] : array;

  if (array.length === 0){
    vm.errorFilter[filter] = true;

  }else{
    vm.errorFilter[filter] = false;
    vm.dirtyFilter[filter] = true;
  }
}

要检查表单中的错误，我已经创建了自己的变量，因为我不知道如何检查＆＃39;选择像经典方式选择输入：

form.inputName.$error.required

角度选择形式的验证

1 个答案: