Angular-formly 对重复部分的多个字段进行自定义验证

Question

我正在尝试为 angular 形式重复的部分创建自定义验证器。

仅当百分比输入的总和为 100 时，表格才有效。例如，如果重复部分有 2 个字段，50 和 50 应该是有效选项，或者 25 和 75 等等。

当我在 JSbin 上工作时，我发现重复的模型实际上并没有更新 onKeydown。因此遍历所有重复部分的值并计算它们的总和是不可能的。

我也试过 modelOptions: { updateOn: 'Keydown' } 但没有成功。它实际上使验证器根本不被调用。

更新

我从匹配字段示例中得出以下解决方案。不幸的是，这个例子本身似乎有问题。

尝试使用以下 JSbin，发现在很多情况下验证器被调用并且 returns 为真，但 field/fields 仍然保持红色（表明它们有问题）。

这里是 JSBin.

Answer 1

您在使用 modelOptions: { updateOn: 'Keydown' } 时打错了字，Keydown 的 k 应该是 small case 而不是大写，在更正错字后它会按预期工作。 ngModelOptions 也接受小写的所有事件名称，如 keydown、keyup、blur、focus 等。

modelOptions: { updateOn: 'keydown' }

Forked Plunkr

Answer 2

抱歉，因为我没有时间回到这个问题上。它在 GitHub 上有 2 个月的 open issue。我通过使用 angular-formly 的 7.1.2 版本临时修复了它，只是在等待更新。我对这个问题的更新版本的 JSBin 应该可以工作。

更新

因为我有时间并用重复部分修复了这个问题（当然是用一种 hacky 的方式）我很难 post 它以防其他人正在寻找这个。

（注意：解决方案不依赖于正式版本）

Working JSBin

Answer 3

创建自己的检查最好使用可重复使用的组件，例如指令 use-form-error。

看jsfiddle的例子。

<div ng-form="testForm" use-form-error="sumNot100" use-error-expression="input_1+input_2+input_3!=100">
  <label>Sum of all input must be 100</label>
  <br>
  <label>Input 1</label>
  <input ng-model="input_1" type="number" name="input_1">
  <label>Input 2</label>
  <input ng-model="input_2" type="number" name="input_2">
  <label>Input 3</label>
  <input ng-model="input_3" type="number" name="input_3">
  <div ng-messages="testForm.$error" class="errors">
    <div ng-message="sumNot100">
      Sum of all input not equal 100
    </div>
  </div>
  <button ng-disabled="testForm.$invalid">
    Submit
  </button>
</div>

Angular-formly 对重复部分的多个字段进行自定义验证

Angular-formly custom Validation on multiple fields on a repeat section

angularjs

angular-formly