AngularJS और बूटस्ट्रैप: अमान्य इनपुट मैदान पर लाल सीमा पर

Question

प्रस्तुत मैं इस बुनियादी रूप AngularJS और का उपयोग कर क्रियान्वित किया है बूटस्ट्रैप:

var myApp = angular.module('myApp', []); 

function MyCtrl($scope) { 

    $scope.save = function() { 
    }; 
} 

http://jsfiddle.net/dennismadsen/0stwd03k/

एचटीएमएल

<div ng-controller="MyCtrl"> 
    <form class="well" name="formTest" ng-submit="save()"> 
     <div class="form-group"> 
      <label for="name">Name*</label> 
      <input type="name" class="form-control" id="name" placeholder="Enter name" required /> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
</div> 

जावास्क्रिप्ट

परिणाम

नाम इनपुट क्षेत्र की आवश्यकता है। जब मैं सबमिट बटन पर क्लिक करता हूं, तो मुझे अमान्य होने पर लाल सीमा के लिए इनपुट फ़ील्ड की आवश्यकता होती है। यह कैसे किया जा सकता है?

वैकल्पिक रूप से, यदि मैं इनपुट फ़ील्ड को फ़ोकस करता हूं और यह अभी भी मान्य नहीं है, तो यह बहुत अच्छा होगा कि फ़ॉर्म को सबमिट करने के बजाय उस समय लाल सीमा दिखाई देगी।

Answer 1

पहली बात आप इनपुट क्षेत्र के लिए ng-model='name' जोड़ने के लिए याद किया गया, उसके बाद ही फार्म के क्लिक पर अवैध हो जाएगा जमा करें, अन्यथा फॉर्म हमेशा मान्य होगा क्योंकि यह मानता है कि इसमें कोई फ़ील्ड मौजूद नहीं है।

तब मैं बटन के क्लिक पर submitsubmitted वर्ग जोड़ना होगा, तो डाल .submitted तरह सीमा सीएसएस माता पिता हो सकता है और .ng-invalid बच्चे होगा तो हम पर .submitted .ng-invalid

HTML शैली डाल सकते हैं

<div ng-controller="MyCtrl"> 
    <form class="well" name="formTest" ng-class="{'submitted': submitted}" ng-submit="save()" > 
     <div class="form-group"> 
      <label for="name">Name*</label> 
      <input type="name" class="form-control" id="name" placeholder="Enter name" ng-model="name" required /> 
     </div>{{submitted}} 
     <button type="submit" class="btn btn-default" ng-click="submitted= true;">Submit</button> 
    </form> 
</div> 

सीएसएस

.submitted .ng-invalid{ 
    border: 1px solid red; 
} 

Working Fiddle

उम्मीद है कि यह आपकी मदद कर सकता है, धन्यवाद।

Answer 2

ट्विटर बूटस्ट्रैप एक has-error वर्ग है, तो मैं प्रपत्र समूह के लिए ng-class साथ संयोजन के रूप में इस का प्रयोग करेंगे, तो अच्छा उपाय label और label-danger वर्गों के साथ एक लेबल:

<div class="form-group" ng-class="{'has-error': errors.Name }"> 
    <label for="name">Name*</label> 
    <input type="name" class="form-control" id="name" placeholder="Enter name" required /> 
    <span class="label label-danger" ng-if="errors.Name">{{errors.Name}}</span> 
</div> 

फिर अपने नियंत्रक में

, errors ऑब्जेक्ट है, और जब नाम अमान्य है तो Name उस स्ट्रिंग पर इसकी संपत्ति सेट करें।

Answer 3

मूल रूप से आपको सत्यापन करने के लिए कोणीय की आवश्यकता है, इसलिए फॉर्म बनाने के लिए novalidate जोड़ें। इसके अलावा त्रुटि सीएसएस जोड़ने के लिए

<form name="myForm" novalidate ng-submit="test()"> 
    <input type="text" name="user" ng-model="user" required ng-class="myForm.user.$invalid && myForm.user.$dirty ? 'error' : ''"> 
    <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid"> 
     <span ng-show="myForm.user.$error.required">Username is required. </span> 
</span> 

<p> 
    <input type="submit" 
    ng-disabled="myForm.user.$dirty && myForm.user.$invalid || 
    myForm.email.$dirty && myForm.email.$invalid"> 
</p> 
</form> 

गुड लक मौसम का निर्धारण करने के input क्षेत्र के लिए ng-class जोड़ने ..