AngularJS: मैं नियंत्रक में $ वैध तरीके से इनपुट कैसे सेट करूं?

Question

TokenInput प्लगइन का उपयोग करना और AngularJS बिल्ट-इन formController सत्यापन का उपयोग करना।

अभी मैं यह जांचने की कोशिश कर रहा हूं कि क्या फ़ील्ड में पाठ है, और फिर फ़ील्ड को मान्य करने के लिए सेट किया गया है। प्लगइन का उपयोग करने के साथ समस्या यह है कि यह स्वयं का इनपुट है और फिर स्टालिंग के लिए उल + ली है।

मुझे नियंत्रक में addItem (formname) और मेरी capablities तक पहुंच है, मुझे बस इसे $ मान्य करने की आवश्यकता है।

मार्कअप।

<form class="form-horizontal add-inventory-item" name="addItem">
     <input id="capabilities" name="capabilities" token-input data-ng-model="inventoryCapabilitiesAutoComplete" data-on-add="addCapability()" data-on-delete="removeCapability()" required>
     <div class="required" data-ng-show="addItem.capabilities.$error.required" title="Please enter capability."></div>
</form>

जे एस।

$scope.capabilityValidation = function (capability) {
  if (capability.name !== "") {
    addItem.capabilities.$valid = true;
    addItem.capabilities.$error.required = false;
  } else {
    addItem.capabilities.$valid = false;
    addItem.capabilities.$error.required = true;
  }
};

जब मैं टोकन ऑब्जेक्ट में कुछ दर्ज किया और पास कर रहा हूं, तो मैं कैपेसिटी वेलिडेशन फ़ंक्शन चला रहा हूं।

संपादित करें:

मेरे इनपुट पर एनजी-मॉडल का पता चलता है, सामान करता है और स्वतः पूर्ण परिणाम प्राप्त करता है, यही वजह है कि मैं काम करने के लिए एनजी-वैध नहीं हो सकता क्योंकि यह मॉडल पर आधारित है।

$scope.inventoryCapabilitiesAutoComplete = {
  options: {
    tokenLimit: null
  },
  source: urlHelper.getAutoComplete('capability')
};

मैंने इस स्वत: पूर्ण कार्यान्वयन को नहीं लिखा है, क्या ऐसा करने का एक और तरीका है जहां मुझे एनजी-मॉडल एटर तक पहुंच होगी और मॉडल फ़ंक्शन को कहीं और स्थानांतरित करना होगा?

Comments

चूंकि आपका प्लगइन अपना स्वयं का इनपुट बना रहा है, और आपने अपना सत्यापन करने के लिए एक फ़ंक्शन लिखा है, तो केवल सत्यापन के लिए अपनी खुद की $ स्कोप प्रॉपर्टी का उपयोग क्यों न करें: <div ... data-ng-show="capabilities_error" ...> दूसरे शब्दों में, क्या कोई कारण है जो आप चाहते हैं / फॉर्मकंट्रोलर का उपयोग करने की आवश्यकता है?

— मार्क राजकोक

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

— क्रिस्टोफर मार्शल

मैंने इनपुट को अलग करने के उद्देश्य से मार्कअप को छोटा किया। मेरे पास इसी रूप में अधिक झुंड हैं।

— क्रिस्टोफर मार्शल

ठीक है। क्या आपने प्रयास किया addItem.capabilities.$valid = trueऔर / या addItem.capabilities सेट किया। $ त्रुटि। सही या गलत के रूप में उपयुक्त?

— मार्क राजकोक

मैंने उन दोनों को आजमाया। मैं आपको दिखाने के लिए अपना प्रश्न अपडेट करूंगा। $ वैध और $ error.required शो नियंत्रक में मेरे विराम बिंदु पर अपरिभाषित है, लेकिन addItem.capabilities अभी भी डेटा है।

— क्रिस्टोफर मार्शल

Answer 1

आप सीधे किसी प्रपत्र की वैधता नहीं बदल सकते। यदि सभी वंशज इनपुट मान्य हैं, तो फॉर्म वैध है, यदि नहीं, तो यह नहीं है।

इनपुट तत्व की वैधता निर्धारित करने के लिए आपको क्या करना चाहिए। इस तरह;

addItem.capabilities.$setValidity("youAreFat", false);

अब इनपुट (और इसलिए फॉर्म) अमान्य है। आप यह भी देख सकते हैं कि कौन सी त्रुटि अमान्य है।

addItem.capabilities.errors.youAreFat == true;

Comments

यदि capabilitiesएक चर है तो क्या होगा ? मेरे पास एक सरणी है जिसमें इनपुट नाम हैं और मैं सरणी के अंदर लूप करना चाहता हूं और उन्हें एक-एक करके अमान्य कर देता हूं: /

— लाइटलेक्स

चर से आपका क्या मतलब है? यह सीधे रूप में स्वयं से बंधा होता है, न कि रूप में मूल्यों से। यह प्रपत्र की nameविशेषता और इनपुट की idविशेषता का उपयोग करता है । यह इसके द्वारा निर्धारित मूल्यों से अलग हैngModel

— उमर कोंटाकी जूल 25'14

मुझे इसका हल मिल गया लेकिन इसका मतलब था:$scope.addItem['myVariableName'].$setValidity("youAreFat", false);

— लाइटलैक्स

इसके बाद ऐसा प्रतीत होता है कि कुछ इनपुट फ़ील्ड परिवर्तन या धुंधला होने पर अब मान्य नहीं हैं

— लियोनार्डो

कोणीय 1.4.7 पर और मुझे इस कोड को $ स्कोप के साथ उपसर्ग करना था ..$scope.addItem.capabilities.$setValidity("youAreFat", false);

— ग्राहम टी

Answer 2

ऊपर दिए गए जवाबों ने मुझे मेरी समस्या हल करने में मदद नहीं की। एक लंबी खोज के बाद मैं इस आंशिक समाधान में टकरा गया ।

मैंने इनपुट कोड को मैन्युअल रूप से गैर-अमान्य में सेट करने के लिए इस समस्या के साथ अपनी समस्या को हल किया है (एनजी-वैध के लिए इसे 'सेट' करने के लिए सेट करें):

$scope.myForm.inputName.$setValidity('required', false);

Comments

मैंने वही किया और यह काम करता है। लेकिन अब मुझे उसी फ़ील्ड को फिर से अमान्य करने की कुछ समस्याएं हैं। यह बदले हुए राज्य में नहीं बदलता है, जो बहुत ही निराशाजनक है। मैं एक बटन पर क्लिक को मान्य करने के लिए एनजी-मॉडल-विकल्प = "{अपडेटऑन: 'सबमिट'}" का उपयोग करता हूं। इस पर कोई विचार?

— OliverKK

जब भी इनपुट मान्य होगा, तब @OliverKK को आपको दूसरे पैरामीटर के रूप में लागू $setValidityकरना trueहोगा।

— बर्नहार्ड हॉफमैन

रूटस्कोप का उपयोग करने का कोई मतलब नहीं है, बस गुंजाइश होनी चाहिए

— रियान एम

मैंने इसी तरह के समाधान की कोशिश की, लेकिन मुझे जो समस्या मिली वह यह है कि अगर मैं फॉर्म में नियंत्रण के मूल्य को बदलने की कोशिश करता हूं, तो यह अमान्य है। मेरे मामले में कि नियंत्रण आंतरिक चयन के साथ एक निर्देश है। यदि मैंने अपने निर्देश (जो एनजी-फॉर्म है) के लिए अमान्य सेट किया है, तो मैं उस अमान्य स्थिति को निकालने में असमर्थ हूं।

— नाओमी

Answer 3

मैं इस पोस्ट w / इसी तरह के मुद्दे पर आया था। मेरा फिक्स मेरे लिए अपनी अमान्य स्थिति को छिपाने के लिए एक छिपे हुए फ़ील्ड को जोड़ना था।

<input type="hidden" ng-model="vm.application.isValid" required="" />

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

vm.hasHighSchool = function (attended) { 
  vm.application.hasHighSchool = attended;
  applicationSvc.addSchool(attended, 1, vm.application);
}

<input type="hidden" ng-model="vm.application.hasHighSchool" required="" />
<div class="row">
  <div class="col-lg-3"><label>Did You Attend High School?</label><label class="required" ng-hide="vm.application.hasHighSchool != undefined">*</label></div>
  <div class="col-lg-2">
    <button value="Yes" title="Yes" ng-click="vm.hasHighSchool(true)" class="btn btn-default" ng-class="{'btn-success': vm.application.hasHighSchool == true}">Yes</button>
    <button value="No" title="No" ng-click="vm.hasHighSchool(false)" class="btn btn-default" ng-class="{'btn-success':  vm.application.hasHighSchool == false}">No</button>
  </div>
</div>

Answer 4

यह बहुत ही सरल है। उदाहरण के लिए: आप जेएस नियंत्रक इस का उपयोग करें:

$scope.inputngmodel.$valid = false;

या

$scope.inputngmodel.$invalid = true;

या

$scope.formname.inputngmodel.$valid = false;

या

$scope.formname.inputngmodel.$invalid = true;

मेरे लिए सभी अलग-अलग आवश्यकता के लिए काम करते हैं। मारो अगर यह आपकी समस्या का समाधान है।