一个 AngularJS 指令，用于在将非零和输入另一个字段时验证一个字段

Question

我有两个表单域 - 员工人数和工资总额。

<div ng-repeat="payroll in report.payrolls">
    <input type="number" min="0" class="input-mini" sister-value="{{payroll.grossPayrollAmount}}" ng-model="payroll.employeeCount" type="text">&nbsp;&nbsp;&nbsp;&nbsp;

    <input ng-blur="payroll.grossPayrollAmount = Math.round(payroll.grossPayrollAmount)" type="number" min="0" class="input-small"  ng-model="payroll.grossPayrollAmount" type="text">
</div>

用户不必输入非零值。但是，如果他们为一个输入一个非零值，那么他们必须为另一个输入一个非零值，这就是我想要验证的内容。

这些字段成组重复 - 因此每个工资单都有一对，所以我不确定通过 ID 或班级获取它们是否有效。

我之前写过一些自定义验证指令，但从来没有在另一个相关字段中检查值。

Answer 1

您可以尝试围绕两个输入创建一个指令：

<directive>
    <input type="number" min="0" ng-model="payroll.employeeCount" type="text">

    <input ng-blur="payroll.grossPayrollAmount = Math.round(payroll.grossPayrollAmount)" type="number" min="0" class="input-small"  ng-model="payroll.grossPayrollAmount" type="text">
</directive>

所以这两个值都可以从中获得，您可以使用 element.find() 访问它们。

您可以像使用 jQuery 一样使用 element.find()。比如给第一个输入设置一个id="employeeCount"，可以通过element.find('#employeeCount')访问，这样就得到第一个输入element，最后访问到它element.find('#employeeCount').val() 的值。

注意：如果您不习惯 jQuery，请记住在类名前添加点 (.)，在 id 名前添加井号 (#)。

在这里，您有一个可用于任何元素的方法列表，包括“find()”：https://docs.angularjs.org/api/ng/function/angular.element

---

更新： 这也适用于多对输入，您只需重复指令标记，例如：

<directive>
    <input [...] >

    <input [...] >
</directive>
<directive>
    <input [...] >

    <input [...] >
</directive>

该指令将为您创建的每个实例独立工作。