如何使用NG模式

编辑输入风格我做了一个小JS here 如何使用NG模式

我也把代码添加到堆栈溢出片段，但由于某种原因，它不工作，我

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

 
function MyCtrl($scope) { 
 
    $scope.my_model = '' 
 
\t \t $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>

我尝试使用的代码片段，但没有工作>，<

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

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

我试了一堆东西，但我无法弄清楚我做错了什么。

UPDATE：REGEX EDITED

来源

2017-07-06 Koop4

什么是您预期的结果？ –

我更新了我的答案，根据您的正则表达式和虚拟文本输入 –

边框在图案不匹配时应该为红色。应使用来自控制器的模式模式应该只允许使用逗号分隔的字符串。字符串和逗号之间允许的空格 – Koop4

在你的代码片段中，()*,()*[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>

来源

2017-07-06 10:16:19

@ Koop4可能是这个解决方案帮助你解决你的问题。 –

这实际上可行，但我不太喜欢！在CSS样式中很重要！ – Koop4

@ Koop4我刚刚更新了代码，按照你说我删除了重要的CSS风格。我希望，这是帮助它。 –

如果ng-pattern失败，这意味着正则表达式不满足，一类ng-invalid-pattern被添加到<input>元件。这意味着你应该能够在红色边框添加到不与下面的CSS传递ng-pattern输入字段：

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

来源

2017-07-06 09:26:40

我试图通过删除ng类并添加建议的样式来编辑jsfiddle，但仍然不起作用，您可以试试吗？ – Koop4

@ Koop4你的正则表达式出错了，我用一个基本的正则表达式'/ [A-Z] /'尝试了，它工作正常。 http://jsfiddle.net/rcupgp5r/1/ –

mmh，正则表达式似乎工作寿，我甚至尝试'''[a-zA-Z] +（*，* [a-zA-Z] +） *''' 什么似乎不工作是提供使用控制器的正则表达式。任何人都可以意识到我们做错了什么？ – Koop4

-1

与此

<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>

尝试

来源

2017-07-06 09:57:13

我没有尝试过，但我的目标是无论如何都有范围的ng模式。我编辑了我的正则表达式，因为之前错误地复制了粘贴，随时编辑您的片段。谢谢 – Koop4

如何使用NG模式

回答

相关问题