यदि प्रपत्र नियंत्रक में मान्य है, तो AngularJS जांचें

Question

मुझे यह जाँचने की आवश्यकता है कि क्या कोई प्रपत्र किसी नियंत्रक में मान्य है।

राय:

<form novalidate=""
      name="createBusinessForm"
      ng-submit="setBusinessInformation()"
      class="css-form">
 <!-- fields -->
</form>

मेरे नियंत्रक में:

.controller(
    'BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, 
              UserService, Photo)
    {

        if ($scope.createBusinessForm.$valid) {
            $scope.informationStatus = true;
        }

        ...

मुझे यह त्रुटि मिल रही है:

TypeError: Cannot read property '$valid' of undefined

Comments

क्या आपने इसे नियंत्रक के भीतर सेटबिजनेस इंफॉर्मेशन फ़ंक्शन के चारों ओर लपेटा था?

— मत्सको

कोड भी गलत क्या हो सकता है का विश्लेषण करने के लिए खंडित ... jsfiddle.net या plunker में एक सरल डेमो बनाएं जो समस्या की नकल करता है। के दायरे में है BusinessCtrl? अधिक देखे बिना नहीं बता सकते

— charlietfl

@matsko: नहीं। मुझे इस कोड को नियंत्रक आरंभीकरण पर अमल करने की आवश्यकता है।

— रॉबर्ट

@charlietfl: बहुत अधिक नहीं है। मैं उदाहरण को आसान बनाने के लिए कुछ कोड निकालता हूं। हां, प्रपत्र BusinessCtrl के दायरे में होना चाहिए (नियंत्रक ऐप में मार्गों पर निर्धारित किया गया है। क्या मैं नीचे दिए गए उत्तर में अपना समाधान जोड़ सकता हूं। लेकिन, मुझे नहीं पता कि यह इस तरह से काम क्यों नहीं कर रहा है।

— रॉबर्ट

Answer 1

इसे इस्तेमाल करे

दृश्य में:

<form name="formName" ng-submit="submitForm(formName)">
 <!-- fields -->
</form>

नियंत्रक में:

$scope.submitForm = function(form){
  if(form.$valid) {
   // Code here if valid
  }
};

या

दृश्य में:

<form name="formName" ng-submit="submitForm(formName.$valid)">
  <!-- fields -->
</form>

नियंत्रक में:

$scope.submitForm = function(formValid){
  if(formValid) {
    // Code here if valid
  }
};

Comments

क्या होगा अगर मैं एक फॉर्म में कई बटनों को मान्य करना चाहता हूं?

— फहद मुल्लाजी

यह मेरे लिए काम किया है, लेकिन $scope.formName.$validअपरिभाषित में परिणाम क्यों ?

— ps0604

अगर आप ng-if का उपयोग करते हैं तो $ गुंजाइश.formName। $ वैध काम नहीं करेगा और यदि आप ng-show का उपयोग करते हैं तो $ गुंजाइश.formName। $ मान्य काम करेगा।

— वैभव शा

यह सबसे अच्छा उत्तर होना चाहिए, सरल। लेकिन क्या आप फॉर्म को अमान्य कर सकते हैं? आप उपयोगकर्ता को कैसे दिखा सकते हैं कि इनपुट अमान्य हैं?

— निकोलस लेउची

@ ps0604 को formName.$validकेवल टेम्प्लेट में एक्सेस किया जा सकता है, यदि आप कंट्रोलर में एक्सेस करना चाहते हैं तो आपको उस तरह $scope.forms.formNameऔर टेम्प्लेट में एक ऑब्जेक्ट बनाने की आवश्यकता है : <form name="forms.formName"> इस टिप्पणी की जाँच करें

— Damsorian

Answer 2

मैंने कंट्रोलर को अपडेट कर दिया है:

.controller('BusinessCtrl',
    function ($scope, $http, $location, Business, BusinessService, UserService, Photo) {
        $scope.$watch('createBusinessForm.$valid', function(newVal) {
            //$scope.valid = newVal;
            $scope.informationStatus = true;
        });
        ...

Comments

यह भी याद रखें कि - यदि फॉर्म एक मोडल है, तो फॉर्म नाम को डॉट नोटेशन के रूप में घोषित करने के लिए याद रखें जैसे: "data.theform" और इसे अपने कंट्रोलर में $ गुंजाइश.data.theform के रूप में एक्सेस करें

— जैस्पर

यह मेरे लिए काम नहीं करता है। कृपया दिखाएं कि आपको नियंत्रक के $ क्षेत्र में 'createBusinessForm' कैसे मिलता है।

— सिरफ

$ गुंजाइश की चीजें चली गई हैं, अब एक दिन हम vmदृष्टिकोण का उपयोग कर रहे हैं । क्या आप सिंटैक्स दृष्टिकोण के रूप में नियंत्रक का उपयोग करके एक ही उत्तर के लिए प्लंकर बना सकते हैं। मैं इसे करने में सक्षम नहीं हूं। यह अन्य के लिए भी सहायक होगा जो आज के संदर्भ के साथ उत्तर की तलाश में हैं। धन्यवाद

— अंकित

Answer 3

यहाँ एक और उपाय है

अपने HTML में एक हिडन स्कोप वैरिएबल सेट करें फिर आप इसे अपने कंट्रोलर से उपयोग कर सकते हैं:

<span style="display:none" >{{ formValid = myForm.$valid}}</span>

यहाँ काम करने का पूरा उदाहरण दिया गया है:

angular.module('App', [])
.controller('myController', function($scope) {
  $scope.userType = 'guest';
  $scope.formValid = false;
  console.info('Ctrl init, no form.');
  
  $scope.$watch('myForm', function() {
    console.info('myForm watch');
    console.log($scope.formValid);
  });
  
  $scope.isFormValid = function() {
    //test the new scope variable
    console.log('form valid?: ', $scope.formValid);
  };
});

<!doctype html>
<html ng-app="App">
<head>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
</head>
<body>

<form name="myForm" ng-controller="myController">
  userType: <input name="input" ng-model="userType" required>
  <span class="error" ng-show="myForm.input.$error.required">Required!</span><br>
  <tt>userType = {{userType}}</tt><br>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br>
  
  
  /*-- Hidden Variable formValid to use in your controller --*/
  <span style="display:none" >{{ formValid = myForm.$valid}}</span>
  
  
  <br/>
  <button ng-click="isFormValid()">Check Valid</button>
 </form>
</body>
</html>

Answer 4

BusinessCtrlपहले initialised है createBusinessFormकी FormController। यहां तक ​​कि अगर आपके पास ngControllerफॉर्म है, तो वह उस तरह से काम नहीं करेगा जैसा आप चाहते थे। आप इसकी मदद नहीं कर सकते हैं (आप अपना निर्माण कर सकते हैं ngControllerDirective, और प्राथमिकता को चकमा देने की कोशिश कर सकते हैं ।) यह इसी तरह से काम करता है।

इस plnkr को उदाहरण के लिए देखें: http://plnkr.co/edit/WYyu3raWQHkJ7XQppDtY?p=preview