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

时间:2016-04-28 19:02:55

标签: javascript jquery angularjs

我有一个字符串数组,让我们称它们为条形码。我正在使用Angular.js循环遍历此数组并显示字符串和输入字段。我需要使用angular来验证当用户在此输入字段中输入新条形码时它与其旁边显示的字符串相同,请参阅下面的示例。我现在正在尝试一个ng-change事件,如果它只是一个输入字段就可以工作,但因为我正在使用ng-repeat,所以我无法做到这一点。我猜我需要建立一个指令?我是棱角分明的新人,所以任何帮助或建议都会很棒。谢谢!

barcode

编辑:

出于我的目的,我需要提醒用户输入的输入是否错误。我的情况是独特的,因为用户不会在输入字段中输入..他们将使用条形码扫描仪,因此基本上它与复制/粘贴相同。 @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>

在角度控制器中:

$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();
}

1 个答案:

答案 0 :(得分:2)

只需将$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>

如果要根据输入的值设置表单有效性,那么,是的,您需要编写自定义指令。