如何使用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模式

回答

相關問題