la direttiva angolare richiede una mia stessa direttiva
-
21-12-2019 - |
Domanda
Ho una direttiva personalizzata, fatta dopo filtri Su NG-Model in un ingresso , che limita l'ingresso solo per le cifre:
.directive('onlydigitinput', function () {
return {
require: 'ngModel',
link: function (scope, element, attrs, modelCtrl) {
modelCtrl.$parsers.push(function (inputValue) {
var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
.replace(/[^0-9]+/g, '');
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
return transformedInput;
});
}
};
})
.
funziona grande da solo, ma usato insieme con, apparentemente, direttiva standard richiesta, inizia a fallire.
Io uso il seguente html (Jade Syntax):
input(type='text' , required, onlydigitinput, min='1', max='99', maxlength='2')
.
(non uso il tipo= 'numero' come si incasinato con la lunghezza massima: MaxLength Ignorato per Input Type=" Number "in Chrome , e anche ignora anche la mia direttiva)
Quando entri in cifre, funziona bene. Il campo è valido. Quando provo a inserire la cifra e poi qualche lettera, funziona bene: il campo è valido e non posso inserire la non cifra. Ma quando inizio dalla non-cifra, il campo non è valido, ma posso ancora inserire lettere, accompagnata dal seguente errore:
TypeError: Cannot read property 'toLowerCase' of undefined
at http://localhost:3000/scripts/core/directives/systemDirectives.js:63:54
.
Riferendosi all'uso di Tolowercase nella direttiva sopra. Per favore consigli come posso cancellare questo errore e far funzionare bene la mia direttiva anche in quest'ultimo caso ed evitare l'errore.
Soluzione
Hai un validatore del campo richiesto sul campo di input.Quindi, quando si imposta il campo in bianco ("") - succede quando digiti non cifra.Il valore diventa
var transformedInput = inputValue.toLowerCase().replace(/ /g, '')
.replace(/[^0-9]+/g, '');
if (transformedInput != inputValue) {
modelCtrl.$setViewValue(transformedInput);
modelCtrl.$render();
}
.
Aggiungi il seguente sopra il codice sopra:
if(!inputValue) return ;
.