2013-05-22 7 views
50

मैं कैसे जांच सकता हूं कि दिया गया इनपुट नियंत्रण खाली है या नहीं? मुझे पता है कि क्षेत्र में $pristine संपत्ति है जो बताती है कि यदि दिया गया फ़ील्ड प्रारंभ में खाली है लेकिन क्या होगा यदि कोई फ़ील्ड भरता है और पूरी सामग्री को फिर से बदलता है?जांचें कि कोई इनपुट बॉक्स खाली है

मुझे लगता है कि ऊपर की सुविधा आवश्यक है क्योंकि उपयोगकर्ता को यह बताने के लिए महत्वपूर्ण है कि फ़ील्ड आवश्यक है।

किसी भी विचार की सराहना की जाएगी!

उत्तर

83

Quite simple:

<input ng-model="somefield"> 
<span ng-show="!somefield.length">Please enter something!</span> 
<span ng-show="somefield.length">Good boy!</span> 

तुम भी ng-hide="somefield.length" बजाय ng-show="!somefield.length" इस्तेमाल कर सकते हैं, तो यह है कि आप के लिए और अधिक स्वाभाविक रूप से पढ़ता है।


एक बेहतर विकल्प वास्तव में form abilities of Angular का लाभ लेने के हो सकता है:

<form name="myform"> 
    <input name="myfield" ng-model="somefield" ng-minlength="5" required> 
    <span ng-show="myform.myfield.$error.required">Please enter something!</span> 
    <span ng-show="!myform.myfield.$error.required">Good boy!</span> 
</form> 

Updated Plnkr here.

+7

हाय, लंबाई संपत्ति केवल तभी उपलब्ध होती है जब फ़ील्ड मान्य हो। उदाहरण के लिए मैंने फ़ील्ड की 'मिनी लम्बाई' को 5 तक सेट किया है और केवल तीन वर्ण दर्ज करें, तो लम्बाई संपत्ति उपलब्ध नहीं होगी। – vivek

+4

@ विवेकपोडदार [कोणीय को क्षमा करना चाहिए] (http://docs.angularjs.org/guide/expression) हालांकि, जब 'लंबाई' उपलब्ध नहीं है तो यह 'अपरिभाषित' का मूल्यांकन करता है जिसे गलत के रूप में व्याख्या किया जाता है। यदि आप नियंत्रक में चेक करने की कोशिश कर रहे हैं, यानी जावास्क्रिप्ट में और एक कोणीय अभिव्यक्ति में नहीं, तो यह एक और कहानी है जहां आपको खुद को क्षमा करने की आवश्यकता है। ध्यान दें कि एक 'आवश्यक' विशेषता भी है जो आप वही कर सकते हैं जो आप चाहते हैं: http://docs.angularjs.org/api/ng.directive:input.text – Supr

+0

@ vivekpoddar 'आवश्यक 'उदाहरण के साथ अपडेट किया गया। – Supr

13

यहां तक ​​कि आप स्ट्रिंग की लंबाई को मापने के लिए जरूरत नहीं है। ए ! ऑपरेटर आपके लिए सबकुछ हल कर सकता है। हमेशा याद रखें:! (रिक्त स्ट्रिंग) = सच (कुछ स्ट्रिंग) झूठी =

तो तुम लिख सकते हैं:

<input ng-model="somefield"> 
<span ng-show="!somefield">Sorry, the field is empty!</span> 
<span ng-hide="!somefield">Thanks. Successfully validated!</span> 
+2

यह मेरे दिमाग को दर्द देता है !! ** वही ** दोनों मामलों की जांच करें? –

+5

हाँ जोनाटास भ्रमित लगता है क्योंकि यह एक ही जांच है लेकिन वास्तव में ये अलग हैं। पहला एनजी शो है और दूसरा एक एनजी-छुपा है। तो वे विपरीत हैं! :-) आप एनजी-शो दोनों का उपयोग भी कर सकते हैं लेकिन अलग-अलग चेक के साथ। एक (!) और बिना किसी के (एक) के साथ एक। –

+0

मैं देखता हूं, स्पष्टीकरण के लिए धन्यवाद। –

5

एक और दृष्टिकोण regex उपयोग कर रहा है, जैसा कि नीचे शो, आप उपयोग कर सकते हैं खाली regex पैटर्न और प्राप्त एक ही का उपयोग कर एनजी पैटर्न

HTML:

<body ng-app="app" ng-controller="formController"> 
<form name="myform"> 
<input name="myfield" ng-model="somefield" ng-minlength="5" ng-pattern="mypattern" required> 
<span ng-show="myform.myfield.$error.pattern">Please enter!</span> 
<span ng-show="!myform.myfield.$error.pattern">great!</span> 
</form> 

नियंत्रक: @formController:

  var App = angular.module('app', []); 
     App.controller('formController', function ($scope) {    
      $scope.mypattern = /^\s*$/g; 
     }); 
0

ऑटो के लिए एक चेकबॉक्स को चेक करता है, तो इनपुट क्षेत्र खाली नहीं है।

<md-content> 
      <md-checkbox ng-checked="myField.length"> Other </md-checkbox> 
      <input ng-model="myField" placeholder="Please Specify" type="text"> 
</md-content> 
संबंधित मुद्दे