简体   繁体   English

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

[英]validate text in an input field with angular.js

I have an array of strings, lets call them barcodes. 我有一个字符串数组,可以称它们为条形码。 I'm using to Angular.js to loop through this array and display the strings and a input field. 我正在使用Angular.js遍历此数组并显示字符串和输入字段。 I need to use angular to validate that when a user enters a new barcode into this input field that it's identical to the string that's displayed right next to it, see example below. 我需要使用angular来验证,当用户在此输入字段中输入新条形码时,该条形码与旁边显示的字符串相同,请参见下面的示例。 I attempting a ng-change event right now which would work if it was just one input field, but because I'm using ng-repeat I cannot make that work. 我现在正在尝试一个ng-change事件,如果它只是一个输入字段,该事件将起作用,但是由于我使用的是ng-repeat,因此无法完成该工作。 I'm guessing I need to build a directive? 我猜我需要建立一个指令? I'm new with angular so any help or suggestions would be great. 我是新来的有角度的人,所以任何帮助或建议都很棒。 Thanks! 谢谢!

条码

EDIT: 编辑:

For my purpose I need to alert the user if they enter an incorrect input. 出于我的目的,如果用户输入错误,我需要提醒他们。 My case is unique as the user will not be typing in the input field.. they will be using a barcode scanner, so essentially it is the same as a copy/paste. 我的情况是唯一的,因为用户将不会在输入字段中键入..他们将使用条形码扫描仪,因此从本质上讲,它与复制/粘贴相同。 @KKKKKKKK answer below gets me very close. 下面的@KKKKKKKK回答使我很接近。 I made some subtile changes (below) but now this introduces other bugs. 我进行了一些微妙的更改(如下),但是现在引入了其他错误。 with this code below I get the proper alert message but it fires three times? 使用下面的代码,我会收到正确的警报消息,但是会触发三遍? I cannot figure out why.. 我不知道为什么。

HTML: 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>

In Angular Controller: 在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();
}

Just pass in the $index to your command and then compare it to your array. 只需将$index传递给命令,然后将其与数组进行比较即可。 (Sorry for blind coding errors) (对不起,编码错误)

Controller: 控制器:

$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: 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>

If you want to set the form validity based on inputted values, then, yes, you would need to write a custom directive. 如果要基于输入的值设置表单有效性,则可以,您需要编写一个自定义指令。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM