This repository was archived by the owner on Apr 12, 2024. It is now read-only.
This repository was archived by the owner on Apr 12, 2024. It is now read-only.
custom directive and ng-pattern interfere in rc.2 #9156
Closed
Description
http://plnkr.co/edit/dbvC9NWcZTpWRRiUTkJU?p=preview
A custom directive (to convert a text input to all-caps as the user types), combined with a ng-pattern for validation, prevents any text from being entered into the text input.
Key HTML:
<input type="text" ng-pattern="/^[a-zA-Z]{2}$/" name="CustomerState" ng-model="customer.CustomerState" required allcaps>
JS:
'use strict';
var app = angular.module('app', ['ngRoute']);
app.directive('allcaps', function() {
// use in input fields as an HTML attribute to capitalize ALL input before sending to the model:
// <input type="text" name="JobCodeCode" ng-model="quote.JobCodeCode" capitalize>
// copied from: http://stackoverflow.com/a/16388643/901048
return {
require: 'ngModel',
link: function(scope, element, attrs, modelCtrl) {
var allcaps = function(oldstr) {
if (oldstr == undefined) { oldstr = ''; }
var newstr = oldstr.toUpperCase();
if (newstr!==oldstr) {
modelCtrl.$setViewValue(newstr);
modelCtrl.$render();
}
console.log(oldstr+","+newstr); // outputs capitalized characters as I type
return newstr;
}
modelCtrl.$parsers.push(allcaps);
allcaps(scope[attrs.ngModel]); // capitalize initial value
}
};
});
In rc.2, I type in the text field and nothing appears. This code works fine in rc.1 and previous versions.
If I remove either the custom directive JS or the ng-pattern attribute, the text field displays text again in rc.2