कोणीय सत्यापित करें इनपुट प्रकार = "number"

Question

मैं इस तरह मार्कअप है:

<form name="myForm" ng-controller="myCtrl" novalidate> 
    <input ng-model="theValue" type="range" min="0" max="100" required> 
    <input ng-model="theValue" type="number" required></input> 
    <span ng-show="theValue.$error.number">Hey! No letters, buddy!</span> 
</form> 

और मैं अवधि को दिखाने के लिए जब उपयोगकर्ता गलती प्रकार दूसरे इनपुट में एक पत्र चाहते हैं। सरल, सही? एक (संभवतः) संबंधित समस्या के रूप में, जब उपयोगकर्ता पहले स्लाइडर इनपुट को स्थानांतरित करता है तो दूसरे इनपुट में मान गायब हो जाता है। क्यूं कर? ऐसा नहीं होता है अगर मैं मार्कअप से type-number हटा देता हूं।

स्पष्ट होने के लिए: मैं चाहता हूं कि उपयोगकर्ता टाइप किए जाने पर तत्काल टूलटिप त्रुटि को देखे, बिना किसी "सबमिट" कार्रवाई के। (मैं वास्तव में सब पर form तत्व का उपयोग करने के लिए नहीं करना चाहते हैं, लेकिन सभी संबंधित क़ौम से उसके लिए आवश्यक लगते हैं।)

http://jsfiddle.net/7FfWT/

कोई वैकल्पिक हल बहुत स्वागत है। यदि संभव हो तो कृपया एक कामकाजी पहेली पोस्ट करें।

Answer 1

type="number" के साथके साथ अच्छी तरह से खेल रहा है के साथ एक अजीब समस्या प्रतीत होती है।

इस Google समूह पोस्ट में पोस्ट आपको सही रास्ते पर ले जाना चाहिए। विशेष रूप से, वहाँ पिछले पोस्ट: https://groups.google.com/forum/#!msg/angular/Ecjx2fo8Qvk/x6iNlZrO_mwJ

jsfiddle लिंक है:

.directive('toNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      ctrl.$parsers.push(function (value) { 
       return parseFloat(value || ''); 
      }); 
     } 
    }; 
}); 

क्रेडिट Schmuli रस्किन

Answer 2

jzm के जवाब देने के लिए: http://jsfiddle.net/ABE8U/

के रूप में चारों ओर एक काम करते हैं, वह एक निर्देश बना दिया है जब तक मुझे इनपुट के रूप में '0' की आवश्यकता नहीं होती तब तक मेरे लिए काम किया।

.directive('toNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      ctrl.$parsers.push(function (value) { 
       if (value === 0) 
        return 0; 

       return parseFloat(value || ''); 
      }); 
     } 
    }; 
}); 

सूचना if (value === 0) ब्लॉक के अलावा: मैं jzm के कोड समायोजित।

कोई भी जो जावास्क्रिप्ट लॉजिकल तुलना को बेहतर समझता है उससे बेहतर है कि मैं शायद अधिक सुरुचिपूर्ण कोड बना सकता हूं।

Answer 3

मैंने एनजी-दोहराने वाले फ़िल्टर के साथ काम करने के निर्देश को अद्यतन किया है। '$' पर ध्यान दें, जो वाइल्डकार्ड है। इस निर्देश को 0 को ठीक से संभालना चाहिए। यह वाइल्डकार्ड से अधिक विफल रहता है पर

.directive('toNumber', function() { 
    return { 
     require: 'ngModel', 
     link: function(scope, elem, attrs, ctrl) { 
      ctrl.$parsers.push(function(value) { 
       return value===0 ? 0 : (parseFloat(value) || '$'); 
      }); 
    }; 
}) 

Answer 4

इसके अलावा, आप सत्यापनकर्ता के रूप में एनजी-पैटर्न का उपयोग कर सकते हैं:

<input type="number" ng-model="theValue" name="theValue" step="1" min="0" max="10" ng-pattern="integerval" required> 
<span ng-show="form.theValue.$invalid">Hey! No letters, buddy!</span> 

$scope.integerval = /^\d*$/; 

Answer 5

jzm, रों जवाब वास्तव में अद्भुत चाल है और अपने समय बचा लिया।

मैं इसे एक कदम आगे ले जा रहा हूं और parseFloat(value) को वास्तव में क्या करता हूं इसके साथ बदल रहा हूं।

directive('number', function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ngModel) { 

      ngModel.$parsers.push(function (value) { 
       if (value==null) 
        return NaN; 
      }); 
     } 
    }; 
});