कोणीय प्रपत्र में सभी क्षेत्रों के ट्रिगर सत्यापन प्रस्तुत करें

Question 1

मैं इस विधि का उपयोग कर रहा हूं: http://plnkr.co/edit/A6gvyoXbBd2kfToPmiiA?p= कलंक पर केवल खेतों को मान्य करें। यह ठीक काम करता है, लेकिन मैं उन्हें भी सत्यापित करना चाहूंगा (और इस प्रकार उन फ़ील्ड्स के लिए त्रुटियों को दिखाऊंगा यदि कोई हो) जब उपयोगकर्ता 'सबमिट' बटन पर क्लिक करता है (एक वास्तविक सबमिट नहीं है, लेकिन फ़ंक्शन के लिए डेटा-एनजी-क्लिक कॉल)

क्या उस बटन को क्लिक करने पर सभी क्षेत्रों पर फिर से सत्यापन शुरू करने का कोई तरीका है?

Question 2

मेरे लिए जो काम किया गया था वह $setSubmittedफ़ंक्शन का उपयोग कर रहा था , जो पहली बार 1.3.20 संस्करण में कोणीय डॉक्स में दिखाई देता है।

क्लिक इवेंट में जहां मैं सत्यापन को ट्रिगर करना चाहता था, मैंने निम्न कार्य किया:

vm.triggerSubmit = function() {
    vm.homeForm.$setSubmitted();
    ...
}

यह सब मेरे लिए था। डॉक्स के अनुसार "यह फ़ॉर्म को उसकी प्रस्तुत स्थिति में सेट करता है।" इसका उल्लेख यहाँ है ।

Question 3

मुझे पता है, जवाब देने में बहुत देर हो चुकी है, लेकिन आपको बस इतना करना है कि सभी रूपों को गंदा करें। निम्नलिखित स्निपेट पर एक नज़र डालें:

angular.forEach($scope.myForm.$error.required, function(field) {
    field.$setDirty();
});

और फिर आप यह जांच सकते हैं कि आपका फॉर्म मान्य है या नहीं:

if($scope.myForm.$valid) {
    //Do something
}

और अंत में, मुझे लगता है, अगर सब कुछ अच्छा लग रहा है, तो आप अपना मार्ग बदलना चाहेंगे:

$location.path('/somePath');

संपादित करें : फ़ॉर्म स्कोप पर तब तक स्वयं को पंजीकृत नहीं करेगा जब तक कि ईवेंट सबमिट न हो जाए। किसी फ़ंक्शन को कॉल करने के लिए बस एनजी-सबमिट निर्देश का उपयोग करें, और उस फ़ंक्शन में उपरोक्त लपेटें, और यह काम करना चाहिए।

Question 4

मामले में किसी को यह बाद में वापस आता है ... उपरोक्त में से कोई भी मेरे लिए काम नहीं करता है। इसलिए मैंने कोणीय रूप सत्यापन की हिम्मत में खोदा और पाया कि वे किसी दिए गए क्षेत्र पर सत्यापनकर्ताओं को निष्पादित करने के लिए कॉल करते हैं। इस संपत्ति को आसानी से कहा जाता है $validate।

यदि आपके पास एक नामित फ़ॉर्म है myForm, तो आप प्रोग्राम myForm.my_field.$validate()सत्यापन को फ़ील्ड सत्यापन निष्पादित करने के लिए कॉल कर सकते हैं । उदाहरण के लिए:

<div ng-form name="myForm">
    <input required name="my_field" type="text" ng-blur="myForm.my_field.$validate()">
</div>

ध्यान दें कि कॉलिंग $validateका आपके मॉडल के लिए निहितार्थ है। NgModelCtrl के लिए कोणीय डॉक्स से। $ मान्य करें:

पंजीकृत सत्यापनकर्ताओं में से प्रत्येक को चलाता है (पहले तुल्यकालिक सत्यापनकर्ता और फिर अतुल्यकालिक सत्यापनकर्ता)। यदि वैधता अमान्य हो जाती है, तो मॉडल को अनिर्धारित पर सेट किया जाएगा, जब तक कि ngModelOptions.allowInvalid सत्य नहीं है। यदि वैधता में परिवर्तन होता है, तो यह मॉडल को अंतिम उपलब्ध वैध $ मॉडलवैल्यू पर सेट करेगा, या तो पिछले पार्स किए गए मान या गुंजाइश से अंतिम मान सेट करेगा।

इसलिए यदि आप अमान्य मॉडल मान के साथ कुछ करने की योजना बना रहे हैं (जैसे उन्हें बताने वाला संदेश पॉप करना), तो आपको यह सुनिश्चित करने की आवश्यकता है कि आपके मॉडल के लिए allowInvalidसेट है true।

Question 5

आप जो चाहते हैं उसे करने के लिए आप Angular-Validator का उपयोग कर सकते हैं। यह प्रयोग करने में आसान है।

यह:

केवल पर $dirtyया पर फ़ील्ड को मान्य करेंsubmit
यदि यह अमान्य है, तो फॉर्म को जमा होने से रोकें
फ़ील्ड के बाद कस्टम त्रुटि संदेश दिखाएं $dirtyया फ़ॉर्म सबमिट किया गया है

डेमो देखें

उदाहरण

<form angular-validator 
       angular-validator-submit="myFunction(myBeautifulForm)"
       name="myBeautifulForm">
       <!-- form fields here -->
    <button type="submit">Submit</button>
</form>

यदि फ़ील्ड पास नहीं होती है validatorतो उपयोगकर्ता फ़ॉर्म जमा नहीं कर पाएगा।

की जाँच करें कोणीय सत्यापनकर्ता उपयोग के मामलों और उदाहरण अधिक जानकारी के लिए।

डिस्क्लेमर: मैं एंगुलर-वैलिडेटर का लेखक हूं

Question 6

खैर, कोणीय तरीका यह होगा कि इसे सत्यापन को संभालने दिया जाए, - क्योंकि यह हर मॉडल में बदलाव करता है - और केवल उपयोगकर्ता को परिणाम दिखाते हैं, जब आप चाहते हैं।

इस मामले में आप तय करते हैं कि त्रुटियों को कब दिखाना है, आपको बस एक ध्वज सेट करना होगा: http://plnkr.co/edit/0NNCpQKhbLTYMZaxMQ9l?p=preview

जहां तक मुझे पता है कि हमें और अधिक उन्नत रूप नियंत्रण देने के लिए कोणीय के लिए दायर एक मुद्दा है। चूंकि यह हल नहीं किया गया है, इसलिए मैं सभी मौजूदा सत्यापन विधियों को फिर से लागू करने के बजाय इसका उपयोग करूंगा।

संपादित करें: लेकिन अगर आप अपने रास्ते पर जोर देते हैं, तो यहां सबमिट करने से पहले सत्यापन के साथ आपकी संशोधित फिडेल है। http://plnkr.co/edit/Xfr7X6JXPhY9lFL3hnOw?p=preview बटन को क्लिक करने पर नियंत्रक एक घटना प्रसारित करता है, और निर्देश सत्यापन जादू करता है।

Question 7

एक दृष्टिकोण सभी विशेषताओं को गंदा करने के लिए मजबूर करना है। आप प्रत्येक नियंत्रक में ऐसा कर सकते हैं, लेकिन यह बहुत गड़बड़ है। बेहतर होगा कि सामान्य हल निकाला जाए।

सबसे आसान तरीका जो मैं सोच सकता था वह था एक निर्देश का उपयोग करना

यह फ़ॉर्म सबमिट विशेषता को संभाल लेगा
यह सभी प्रकार के क्षेत्रों से गुजरता है और प्राचीन क्षेत्रों को गंदा करता है
यह जाँचता है कि फॉर्म सबमिट फ़ंक्शन को कॉल करने से पहले वैध है या नहीं

यहाँ निर्देश है

myModule.directive('submit', function() {
  return {
    restrict: 'A',
    link: function(scope, formElement, attrs) {
      var form;
      form = scope[attrs.name];
      return formElement.bind('submit', function() {
        angular.forEach(form, function(field, name) {
          if (typeof name === 'string' && !name.match('^[\$]')) {
            if (field.$pristine) {
              return field.$setViewValue(field.$value);
            }
          }
        });
        if (form.$valid) {
          return scope.$apply(attrs.submit);
        }
      });
    }
  };
});

और उदाहरण के लिए, अपना फ़ॉर्म html अपडेट करें:

 <form ng-submit='justDoIt()'>

बन जाता है:

 <form name='myForm' novalidate submit='justDoIt()'>

यहां एक पूरा उदाहरण देखें: http://plunker.co/edit/QVbisEK2WEbORTAWL7Gu?p?preview

Question 8

प्रपत्र त्रुटि संदेश दिखाने के लिए यहां मेरा वैश्विक कार्य है।

 function show_validation_erros(form_error_object) {
        angular.forEach(form_error_object, function (objArrayFields, errorName) {
            angular.forEach(objArrayFields, function (objArrayField, key) {
                objArrayField.$setDirty();
            });
        });
    };

और मेरे किसी भी नियंत्रक में,

if ($scope.form_add_sale.$invalid) { 
    $scope.global.show_validation_erros($scope.form_add_sale.$error);
}

Question 9

थिलाक के जवाब के आधार पर मैं इस समाधान के साथ आने में सक्षम था ...

चूंकि मेरे फ़ॉर्म फ़ील्ड केवल सत्यापन संदेश दिखाते हैं यदि कोई फ़ील्ड अमान्य है, और उपयोगकर्ता द्वारा मुझे छुआ गया है तो मैं अपने अमान्य फ़ील्ड दिखाने के लिए एक बटन द्वारा ट्रिगर किए गए इस कोड का उपयोग करने में सक्षम था:

// Show/trigger any validation errors for this step
angular.forEach(vm.rfiForm.stepTwo.$error, function(error) {
  angular.forEach(error, function(field) {
    field.$setTouched();
  });
});
// Prevent user from going to next step if current step is invalid
if (!vm.rfiForm.stepTwo.$valid) {
  isValid = false;
}

<!-- form field -->
<div class="form-group" ng-class="{ 'has-error': rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched && rfi.rfiForm.stepTwo.Parent_Suffix__c.$invalid }">

  <!-- field label -->
  <label class="control-label">Suffix</label>
  <!-- end field label -->
  <!-- field input -->
  <select name="Parent_Suffix__c" class="form-control"
          ng-options="item.value as item.label for item in rfi.contact.Parent_Suffixes"
          ng-model="rfi.contact.Parent_Suffix__c" />
  <!-- end field input -->
  <!-- field help -->
  <span class="help-block" ng-messages="rfi.rfiForm.stepTwo.Parent_Suffix__c.$error" ng-show="rfi.rfiForm.stepTwo.Parent_Suffix__c.$touched">
    <span ng-message="required">this field is required</span>
  </span>  
  <!-- end field help -->
</div>
<!-- end form field -->

स्निपेट का विस्तार करें

Question 10

नोट: मुझे पता है कि यह एक हैक है, लेकिन यह कोणीय 1.2 के लिए उपयोगी था और पहले जो एक सरल तंत्र प्रदान नहीं करता था।

मान्यता परिवर्तन घटना पर चलती है , इसलिए कुछ चीजें जैसे मूल्यों को प्रोग्रामेटिक रूप से बदलना इसे ट्रिगर नहीं करेगा। लेकिन परिवर्तन की घटना को ट्रिगर करने से सत्यापन शुरू हो जाएगा। उदाहरण के लिए, jQuery के साथ:

$('#formField1, #formField2').trigger('change');

Question 11

मैं बटन क्लिक पर सत्यापन से निपटने में इस दृष्टिकोण को पसंद करता हूं ।

नियंत्रक से कुछ भी आह्वान करने की आवश्यकता नहीं है,
यह सब एक निर्देश के साथ संभाला जाता है।

जीथूब पर

Question 12

आप यह कोशिश कर सकते हैं:

// The controller

$scope.submitForm = function(form){
   		//Force the field validation
   		angular.forEach(form, function(obj){
   			if(angular.isObject(obj) && angular.isDefined(obj.$setDirty))
   			{ 
   				obj.$setDirty();
   			}
   		})
        
        if (form.$valid){
		
			$scope.myResource.$save(function(data){
		     	//....
			});
		}
}

<!-- FORM -->

  <form name="myForm"  role="form" novalidate="novalidate">
<!-- FORM GROUP to field 1 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field1.$invalid && myForm.field1.$dirty }">
      <label for="field1">My field 1</label>
        <span class="nullable"> 
        <select name="field1" ng-model="myresource.field1" ng-options="list.id as list.name for list in listofall"
          class="form-control input-sm" required>
            <option value="">Select One</option>
        </select>
        </span>
        <div ng-if="myForm.field1.$dirty" ng-messages="myForm.field1.$error" ng-messages-include="mymessages"></div>
  </div>
    
<!-- FORM GROUP to field 2 -->
  <div class="form-group" ng-class="{ 'has-error' : myForm.field2.$invalid && myForm.field2.$dirty }">
    <label class="control-label labelsmall" for="field2">field2</label> 
      <input name="field2" min="1" placeholder="" ng-model="myresource.field2" type="number" 
      class="form-control input-sm" required>
    <div ng-if="myForm.field2.$dirty" ng-messages="myForm.field2.$error" ng-messages-include="mymessages"></div>
  </div>

  </form>

<!-- ... -->
<button type="submit" ng-click="submitForm(myForm)">Send</button>

स्निपेट का विस्तार करें

Question 13

मैंने इसे काम करने के लिए कुछ किया है।

<form name="form" name="plantRegistrationForm">
  <div ng-class="{ 'has-error': (form.$submitted || form.headerName.$touched) && form.headerName.$invalid }">
    <div class="col-md-3">
      <div class="label-color">HEADER NAME 
        <span class="red"><strong>*</strong></span></div>
    </div>
    <div class="col-md-9">
      <input type="text" name="headerName" id="headerName" 
             ng-model="header.headerName" 
             maxlength="100" 
             class="form-control" required>
      <div ng-show="form.$submitted || form.headerName.$touched">
        <span ng-show="form.headerName.$invalid" 
              class="label-color validation-message">Header Name is required</span>
      </div>
    </div>
  </div>

  <button ng-click="addHeader(form, header)" 
          type="button" 
          class="btn btn-default pull-right">Add Header
  </button>

</form>

अपने नियंत्रक में आप कर सकते हैं;

addHeader(form, header){
        let self = this;
        form.$submitted = true;
        ... 
    }

आपको कुछ सीएसएस भी चाहिए;

.label-color {
            color: $gray-color;
        }
.has-error {
       .label-color {
            color: rgb(221, 25, 29);
        }
        .select2-choice.ui-select-match.select2-default {
            border-color: #e84e40;
        }
    }
.validation-message {
       font-size: 0.875em;
    }
    .max-width {
        width: 100%;
        min-width: 100%;
    }

Question 14

जब मैं चाहता हूं कि मेरे फॉर्म के सभी क्षेत्रों को मान्य करने के लिए, मैं $ $ $ प्रत्येक क्षेत्र पर इस तरह से एक सत्यापन करता हूं:

angular.forEach($scope.myform.$$controls, function (field) {
    field.$validate();
});