Question

所以我是Angular的新手。

我想要做的是强制输入字段（文本）如下：

*Uppercase only, or change the letters to uppercase automatically
*Max 30 characters
*No special characters

如果有人试图插入特殊字符，则根本不会显示。所以不仅仅是验证。它正在接受关于输入的那些规则。

我希望在特定条件下在该字段上完成所有这些：让我们说当占位符等于我的模型中的“Nickname”formField.CustomFieldName

提前谢谢

Answer 1

至少有两种方法可以做。使用ng-keypress检查您输入的每个字符或检查输入上的正则表达式。我不打算提供整个解决方案，但你可以从这里开始。

<div ng-app="myApp">
<div ng-controller="myController">
  <input type="text" ng-model="yourInput" ng-keypress="yourKeypressFunction($event)">
</div>
</div>

在你的js中：

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

myApp.controller('myController', ['$scope', function($scope) {
    $scope.yourInput = "";
  $scope.yourKeypressFunction = function(event) {
    console.log(event); // check for event.which, if it is not the char you want, return;
    console.log($scope.yourInput); // check for regular expression
  }
}]);

https://docs.angularjs.org/api/ng/directive/ngKeypress

Answer 2

尝试onchange事件并在您要查找的组件中编写方法，或者如果您使用的是observable，则尝试使用observable方法将输入转换为您的需求。

点击此链接http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

这对如何处理表单和输入字段有很好的解释

Answer 3

你可以这样使用jQuery来限制字符

$("#youTextFieldId").keypress(function(e)
{
var code = e.which || e.keyCode;
// 65 - 90 for A-Z and 97 - 122 for a-z 95 
 if (!((code >= 65 && code <= 90) || !(code >= 97 && code <= 122) )
 {
  e.preventDefault();
 }
});

和您的文字限制

<input id="youTextFieldId" type="text" maxlength="30" style="text-transform:uppercase">

Answer 4

尝试在文本字段中使用 ng-pattern = you pattern 和 maxlength 。例如：

<input type="text" ng-pattern="/^[a-zA-Z0-9]*$/" maxlength="30">

/ ^ [a-zA-Z0-9] * $ / 只允许您输入字符和数字。没有任何特殊字符。

Answer 5

使用https://github.com/candreoliveira/ngMask稍微研究一下你的模式非常容易创建的文档，它也会强制用户只输入所需的模式，最重要的是你可以写maxlength =“30”，输入类型=“文本”

请查看此示例，以便在ngMask ngMask String Example Demo

的演示中更好地理解

Answer 6

所以这是解决这个问题的方法。

我希望它有助于某人。我为此做了一个小提琴：http://jsfiddle.net/m152d0t9/

var app = angular.module("myApp", []);

function Fiddle($scope) {}

app.directive('customInputFormat', function() {
  return {
    restrict: 'A',
    require: '?ngModel',
    scope: {
      customInputFormat: '='
    },
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) {
        return;
      }

      scope.$watch(attr.ngModel, function(newVal, oldVal) {
        if (!scope.customInputFormat) {
          return;
        }
        if (newVal && newVal.length) {
          var newStr = newVal.replace(/[^a-zA-Z0-9\s]*/g, '').toUpperCase();
          if (newStr.length > 20) {
            newStr = newStr.substring(0, 20);
          }
          ctrl.$setViewValue(newStr);
          ctrl.$render();
        }
      })
    }
  };
});

对于HTML：

<ul ng-controller="Fiddle">
  <li>
    <label data-ng-init="condition = true;" for="foobar"> Input text</label>
    <input custom-input-format="condition" id="foobar" name="foobar" type="text" ng-model="foo" required />
  </li>
</ul>

输入Angular

6 个答案: