angularjs验证输入和prevent变化，如果无效 [英] angularjs validate input and prevent change if invalid

问题描述

我neeed输入字段，我可以只输入值1,2或3所以我试图建立其prevents所有更改，如果它不符合这些值模型中的指令。

如值为1，我将其更改为5应该还是1。

我已经把一个小的小提琴 http://jsfiddle.net/kannix/Q5YKE/但它最有可能错误地使用$解析器。

  app.directive（'myvalidator'，函数（）{
    返回{
        要求：'ngModel'，
        链接：功能（范围，榆树，ATTRS，CTRL）{
            变种validValues​​ = [1,2,3];
            Ctrl键。$ parsers.push（函数（值）{
                如果（validValues​​.indexOf（值）=== -1）{
                    //在这里做什么？应拒绝错误值，并留下旧
                }
            }）;
        }
    }}）
 

解决方案

您可以随时听键preSS 事件和prevent从人物使其通过。 这里是一个plunker

  VAR应用= angular.module（'plunker'，[]）;app.controller（'MainCtrl'，函数（$范围）{
  $ scope.name ='世界';
  $ scope.validValues​​ = ['一'，'1'，'2'];
}）;app.directive（'myValidator'，函数（$解析）{
    返回{
        范围： {
          validValues​​：'= validValues​​
        }，
        链接：功能（范围，榆树，ATTRS）{
          elm.bind（键preSS'功能（E）{
            VAR CHAR = String.fromChar code（e.which || e.char code || e.key code），匹配= [];
            angular.forEach（scope.validValues​​，功能（值，键）{
              如果（字符===值）matches.push（焦）;
            }， 火柴）;
            如果（matches.length == 0）{
              亦即preventDefault（）;
              返回false;
            }
          }）;
        }
    }
}）;
 

I neeed an input field where I can enter only the values 1,2 or 3 so i'm trying to build a directive which prevents all changes to the model if it doesn't match these values.
eg the value is 1 and I change it to 5 it should be still 1.

I've put together a small fiddle http://jsfiddle.net/kannix/Q5YKE/ but it's most likely wrong to use the $parsers.

app.directive('myvalidator', function () {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            var validValues = [1,2,3];
            ctrl.$parsers.push(function (value) {
                if (validValues.indexOf(value) === -1){
                    //what to do here? should refuse wrong value and leave the old one
                }   
            });
        }
    }   

})

解决方案

You could always listen to the keypress event and prevent the character from making it through. Here is a plunker

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.validValues = ['a','1','2'];
});

app.directive('myValidator', function ($parse) {
    return {
        scope: {
          validValues: '=validValues'
        },
        link: function (scope, elm, attrs) {
          elm.bind('keypress', function(e){
            var char = String.fromCharCode(e.which||e.charCode||e.keyCode), matches = [];
            angular.forEach(scope.validValues, function(value, key){
              if(char === value) matches.push(char);
            }, matches);
            if(matches.length == 0){
              e.preventDefault();
              return false;
            }
          });
        }
    }   
});

这篇关于angularjs验证输入和prevent变化，如果无效的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！