Question

我有这个文本框，它应该是红色的，直到用户输入所有5个字符但是然后应该是绿色但是当用户输入第一个字符时它变绿了它甚至不需要数字...所以我怎么能解决这个问题？

    @Html.TextBoxFor(m => m.ZipCode, new { id = "zip", @class = "form-control", @maxlength = "5", @required = "required", ng_model = "zipCode", ng_pattern = @"^[0-9]{5}$" })

和风格

.ng-invalid {
    background-color:#FF8080;

}
.ng-valid {
    background-color:#ADEBAD;
}

Answer 1

我将您的模式修改为如下所示：/^(\w{1,5})$/

\ w是所有字母数字字符的缩写，锚点强制模式匹配整个输入。

我的JS看起来像这样：

    var App = angular.module('App',[]).controller('Ctrl', Ctrl);

    function Ctrl($scope){
      $scope.noLetters5LengthRegex = /^\d{1,5}$/;
    }

我的标记：

<div ng-app="App">
  <div ng-controller="Ctrl">
    <input type="text" ng-model="something" ng-pattern="noLetters5LengthRegex"
   required/>
  </div>
</div>

注意：您可以从控制器功能中取出模式并将其直接放入视图中，如果您愿意，可以将其视为您想要的更多内容。

以下是适合您的演示：

根据OP请求更新

http://codepen.io/nicholasabrams/pen/QbaxrE

Answer 2

你的范围需要有逗号。

ng_pattern = @"^[0-9]{5,5}$"

我会建议Alpha G33k说的是什么，并使用数字速记，因为它使它更具可读性。

ng_pattern = @"^\d{5,}$"

如果你想要5个而且只需要5个字符，那么你的模式需要如下：

ng_pattern = @"^\d{5,5}$"

如何修复角度的ng-pattern

2 个答案: