強制輸入角度模式

我想要做的就是強制輸入字段（文本）是爲以下幾點：

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

如果有人試圖插入特殊字符它不會在所有顯示。所以它的不僅驗證。它接受這些輸入規則。

而且我想所有這一切都將在該領域做了一個特定條件：比方說，當佔位符等於「暱稱」，這是在我的模型formField.CustomFieldName

預先感謝您

來源

2017-04-17 Hassen Ch.

嘗試onchange事件，並在您希望執行的組件中編寫方法，或者如果您正在使用observables，則嘗試使用observable方法將輸入轉換爲您的需求。

檢查此鏈接http://blog.angular-university.io/introduction-to-angular-2-forms-template-driven-vs-model-driven/

這有很好的解釋如何處理表單和輸入字段

來源

2017-04-17 18:02:47 alapati

我很抱歉，但沒有幫助。就像我說過的，我是新來的角色，我不太明白應該說什麼。我已使用角 –

，你可以做這樣的使用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">

來源

2017-04-17 18:08:32 adam

登陸正在進行的項目，這是部分答案。我只想在我的模型formField.CustomFieldName ==「Nickname」時進行驗證。在你的解決方案中，大寫字母將適用於所有內容，但我希望僅在這種情況下才能執行它。 –

有至少有兩種方法可以做。使用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

來源

2017-04-17 18:26:46

就像我所說的，我是角度中的noob，所以... –

其餘的只是javascript。我可以更新我的答案 –

我將不勝感激。此外，這是內部和重複。我如何激活這隻有我提到的具體情況？ –

嘗試使用NG模式=您模式在你的文本字段最大長度。對於如：

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

的/^ [A-ZA-Z0-9] * $/將允許你只輸入字符和只有數字。沒有任何特殊字符。

來源

2017-04-17 19:18:39

使用https://github.com/candreoliveira/ngMask對文檔的一些研究，你的模式很容易創建，它也會強制用戶只輸入所需的模式，最重要的是你可以只寫maxlength =「30」，輸入類型= 「文本」

看着外面的這個例子更好地瞭解的ngMask ngMask String Example Demo

來源

2017-04-17 19:44:09

演示所以這是解決這個問題。

我希望它可以幫助別人。我給這個小提琴：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>

來源

2017-04-18 17:16:07 HassenCh

強制輸入角度模式

回答

相關問題