Question

我想做那样的输入：我是Programer，但是如果我输入错误的字母，它会自动删除它，或者不允许我输入那个字母。

我尝试过这种代码：index.html

DropDownList1.Items.Cast<ListItem>()
                   .Where(x => x.Value.Contains("C-2"))
                   .LastOrDefault().Selected = true;

的script.js

    <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">  
    <title>I AM Programmer</title>
</head>
<body ng-app="myApp">

<form name="myForm">
<input name="myInput" ng-model="myInput" required my-directive>
</form>

<!-- <h1>{{myForm.myInput.$valid}}</h1>
 -->
</html>

的style.css

var app = angular.module('myApp', []);
app.directive('myDirective', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attr, mCtrl) {
            function myValidation(value) {
                if (value.indexOf("I am Programmer") > -1) {
                    mCtrl.$setValidity('charE', true);
                } else {
                    mCtrl.$setValidity('charE', false);
                }
                return value;
            }
            mCtrl.$parsers.push(myValidation);
        }
    };
});

Answer 1

您可以使用 $ validators 。以下是与您的示例内联的示例。

＆＃13;

angular.module("myApp", [])
  .controller('ctrl', function($scope) {})
  .directive('myDirective', function() {
    return {
      require: 'ngModel',
      link: function(scope, element, attr, mCtrl) {
        mCtrl.$validators.strictCheck = function(modelVal) {
          var regex = /^I am Programmer$/;
          if (regex.test(modelVal)) {
            return true;
          } else {
            return false;
          }
        }
      }
    };
  });

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="ctrl">
  <form name="myForm">
    <input name="myInput" ng-model="myInput" required my-directive>
    <span ng-if="myForm.myInput.$error.required">
      Required!
    </span>
    <span ng-if="myForm.myInput.$error.strictCheck">
      Please input 'I am Programmer'
    </span>
  </form>

</body>

</html>

＆＃13;

您可以相应地修改RegExp，以满足您的需求。您还可以使用 $ setViewValue（modelValue）和 $ render（）

设置输入值

mCtrl.$setViewValue("");
mCtrl.$render();

Answer 2

我认为这就是你想要的 HTML

<input name="myInput" valid-ng-model="myInput" data-ng-trim="false" required my-directive>

的script.js

var app = angular.module('myApp', []);
app.directive('myDirective', function ($parse) {
    "use strict";
    return {
        require: 'ngModel',
        restrict: "A",
        link: function (scope, element, attr, mCtrl) {
            function myValidation(value) {
                if ("I am Programmer".toLowerCase().indexOf(value.toLowerCase()) === 0) {
                    mCtrl.$setValidity('charE', true);
                    return value;
                } else {
                    mCtrl.$setViewValue(scope.myInput);
                    mCtrl.$render();
                    mCtrl.$setValidity('charE', false);
                }
            }
            mCtrl.$parsers.push(myValidation);
        }
    };
});

app.directive('validNgModel', function ($compile, $parse) {
    return {
        terminal: true,
        priority: 1000,
        scope: true,
        link: function link(scope, element, attrs) {
            var parsedNgModel = $parse(attrs.validNgModel);
            scope.$$customNgModel = angular.copy(parsedNgModel(scope));
            element.attr('ng-model', '$$customNgModel');
            element.removeAttr('valid-ng-model');
            var compiledElement = $compile(element)(scope);
            var ngModelCtrl = compiledElement.controller('ngModel');
            scope.$watch('$$customNgModel', function (newModelValue) {
                if (ngModelCtrl.$valid || ngModelCtrl.$error.required) {
                    parsedNgModel.assign(scope.$parent, newModelValue);
                }
            });
        }
    };
});

我怎样才能对某些词语进行限制？

2 个答案: