使用angular.js验证输入字段中的文本

Question

我有一个字符串数组，可以称它们为条形码。 我正在使用Angular.js遍历此数组并显示字符串和输入字段。 我需要使用angular来验证，当用户在此输入字段中输入新条形码时，该条形码与旁边显示的字符串相同，请参见下面的示例。 我现在正在尝试一个ng-change事件，如果它只是一个输入字段，该事件将起作用，但是由于我使用的是ng-repeat，因此无法完成该工作。 我猜我需要建立一个指令？ 我是新来的有角度的人，所以任何帮助或建议都很棒。 谢谢！

编辑：

出于我的目的，如果用户输入错误，我需要提醒他们。 我的情况是唯一的，因为用户将不会在输入字段中键入..他们将使用条形码扫描仪，因此从本质上讲，它与复制/粘贴相同。 下面的@KKKKKKKK回答使我很接近。 我进行了一些微妙的更改（如下），但是现在引入了其他错误。 使用下面的代码，我会收到正确的警报消息，但是会触发三遍？ 我不知道为什么。

HTML：

<input type="text" class="form-control matching" ng-model-options="{ updateOn: 'blur' }" ng-model="item.barcodeInput" placeholder="Barcode">
<div ng-show="!isEqualToBarCode($index, item.barcodeInput)"> Error: Value not the same! </div>

在Angular Controller中：

$scope.isEqualToBarCode = function(index, val) {
    if(val === null || val === undefined) return true;
    if($scope.barcodes.A_adaptors[index] !== val.trim()) {
        console.log("wrong");
        alert("Incorrect Barcode, Try Again.");
        val = "";
    }
    return $scope.barcodes.A_adaptors[index] === val.trim();
}

Answer 1

只需将$index传递给命令，然后将其与数组进行比较即可。 （对不起，编码错误）

控制器：

$scope.isEqualToBarCode = function(index, val) {

    //if val is empty, don't display error
    if(val === null || val === undefined) return true;

    return $scope.barcodeArray[index].barcodeVal === val.trim();
}

HTML：

<div ng-repeat="item in barcodeArray">
    {{item.barcodeVal}}

    <input ng-model="item.barcodeInput" ng-model-options="{ updateOn: 'blur' }" />

    <div ng-show="!isEqualToBarCode($index, item.barcodeInput)">
        Oh no!  Value not the same!
    </div>

</div>

如果要基于输入的值设置表单有效性，则可以，您需要编写一个自定义指令。