如何使用 ng-pattern 编辑输入样式答案

【问题标题】：How to edit input style by using ng-pattern如何使用 ng-pattern 编辑输入样式
【发布时间】：2017-07-06 09:18:48
【问题描述】：

我做了一个小jshere

我还将代码添加到堆栈溢出 sn-p 但由于某种原因它对我不起作用

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

function MyCtrl($scope) {
    $scope.my_model = ''
	 	$scope.my_regex = '/^[A-Za-z]+(\,[A-Za-z]+)*$/';
    $scope.my_placeHolder = 'write something';
}

.invalid input[name=my_input]{   
  border: 2px solid red;
}


input[name=my_input] {
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <form name="contentForm">
    <input type="text"
         name="my_input"
         ng-class="{ 'invalid': contentForm['my_input'].$invalid }"
         ng-model="my_model"
         ng-pattern="{{my_regex}}"
         placeholder="{{my_placeHolder}}">
  </form>
</div>

我尝试使用代码 sn-p 但不起作用>,

所以，如果输入文本没有通过正则表达式规则，我的目标是编辑输入边框（让我们将其设为红色）。

正则表达式应该接受任何逗号分隔的字符串。

我尝试了很多东西，但我无法弄清楚我做错了什么。

更新：正则表达式已编辑

【问题讨论】：

你的预期结果是什么？
我根据您的正则表达式和虚拟文本输入更新了我的答案
当模式不匹配时，边框应该是红色的。应该使用控制器中的模式模式应该只允许用逗号分隔的字符串。字符串和逗号之间允许有空格

标签： css angularjs regex angularjs-ng-pattern

【解决方案1】：

如果ng-pattern 失败，这意味着没有满足正则表达式，则将ng-invalid-pattern 类添加到<input> 元素中。这意味着您应该能够使用以下 CSS 将红色边框添加到未通过 ng-pattern 的输入字段：

input[name=my_input].ng-invalid-pattern{
    border: 2px solid red;
}

【讨论】：

我试图通过删除 ng 类并添加你建议的样式来编辑 jsfiddle，但仍然不起作用，你也可以试试吗？
@Koop4 你的正则表达式有问题，我尝试了一个基本的正则表达式/[A-Z]/，它可以工作。 jsfiddle.net/rcupgp5r/1
mmh，正则表达式似乎可以工作，我什至尝试使用[a-zA-Z]+( *, *[a-zA-Z]+)* 似乎不起作用的是使用控制器提供正则表达式。谁能意识到我们做错了什么？
@Koop4 为您编写了一个新的正则表达式。希望没事。 /^[A-Za-z]+(\,[A-Za-z]+)*$/ 在行动：jsfiddle.net/rcupgp5r/2
使用正则表达式可以工作，但从模式中使用它却不能，即使使用 RegExp 构造函数也是如此。我错过了什么吗？编辑，我使用了以前的正则表达式，因为您不接受字符串和逗号之间的空格。这是正确的 jsfiddle jsfiddle.net/yhqjf6bv

【解决方案2】：

在您的代码 sn-p 中，( )*,( )*[a-zA-Z]+)* 正则表达式无效。您可以测试您的正则表达式here 或其他在线工具。在这里我尝试了简单的数字正则表达式，它工作正常。

function formCtrl($scope){
     $scope.my_model = 'test,dfsdf,dfs'
    $scope.my_placeHolder = 'write something';
    $scope.my_pattern="/^[A-Za-z]+(\,[A-Za-z]+)*$/";// here you replace your regex which you want 
}

.invalid{   
  border: 2px solid red;
}

.valid {
  border: 2px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<div ng-app ng-controller="formCtrl">
<form name="myForm" >
    <input type="text" ng-model="my_model" name="my_input" ng-pattern="
    {{my_pattern}}" ng-class="{'invalid': myForm.my_input.$error.pattern, 'valid': !myForm.my_input.$error.pattern }"
    placeholder="{{my_placeHolder}}"
    />
    <span ng-show="myForm.my_input.$error.pattern">Not a valid input!</span>
   
</form>
</div>
</html>

【讨论】：

@Koop4 这个解决方案可能会帮助您解决问题。
这确实有效，但我不太喜欢 css 样式中的 !important。
@Koop4 我刚刚更新了代码，正如你所说，我从 css 样式中删除了重要的内容。我希望，这对它有帮助。

【解决方案3】：

试试这个

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <form name="contentForm">
    <input type="text"
         name="my_input"
         ng-class="{'invalid': contentForm['my_input'].$error.pattern  }"
         ng-model="my_model"
         ng-pattern="'( )*,( )*[a-zA-Z]+)*'"
         placeholder="{{my_placeHolder}}">
  </form>
</div>

【讨论】：

我没有尝试过，但我的目标是无论如何都要从范围内获得 ng 模式。我编辑了我的正则表达式，因为它之前被错误地复制粘贴，随时编辑你的 sn-p。谢谢