कोणीय ngMessage: फॉर्म पर मान्य करें

Question

इस plunk में ngMessage सत्यापन के साथ एक फ़ॉर्म है। यह मैं क्या हासिल करने की कोशिश कर रहा हूँ है:

• प्रपत्र उपयोगकर्ता को दिखाया जाता है, तो कोई त्रुटि संदेश प्रदर्शित किया जाना चाहिए
• कलंक, यदि क्षेत्र में त्रुटियाँ हैं, संदेश
प्रदर्शित किया जाना चाहिए
• जब फॉर्म सबमिट किया गया है, यदि त्रुटियों वाले कोई फ़ील्ड हैं, तो त्रुटि संदेश प्रदर्शित किए जाने चाहिए।

प्लंक में मेरे पास दो समस्याएं हैं: (1) संदेश प्रारंभ में दिखाए जाने पर संदेश प्रदर्शित होता है, और (2) जब कोई त्रुटि संदेश और उपयोगकर्ता बटन पर क्लिक नहीं करता है, तो फॉर्म सबमिट नहीं होता है। कोड के साथ क्या गलत है?

एचटीएमएल

<form name="myForm" novalidate> 
    <label> 
    Enter your name: 
    <input type="text" 
      name="myName" 
      ng-model="name" 
      ng-minlength="5" 
      ng-maxlength="20" 
      required /> 
    </label> 

    <div ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
    </div> 

    <button type="submit" 
    ng-submit="myForm.$valid && submitForm()">Submit</button> 
</form> 

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

var app = angular.module('ngMessagesExample', ['ngMessages']); 
app.controller('nameController', function ($scope) { 

    $scope.submitForm = function() { 
    alert('Form submitted - fields passed validation'); 

    };  
}); 

Answer 1

आप जैसे जैसे हालत का उपयोग कर सत्यापन संदेश प्रदर्शित करने के लिए की जरूरत है एनजी-अगर

HTML:

<div ng-if="submitted || myForm.myName.$dirty" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 

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

<form name="myForm" novalidate ng-submit="submitForm()"> 

Answer 2

Kwarc के anwser के आधार पर, यहाँ: बटन से

$scope.submitForm = function() { 
    $scope.submitted = true; 
    if (myForm.$valid) { 
     alert('Form submitted - fields passed validation'); 
    } 
}; 

और कदम एनजी के लिये भेज तरह टैग के रूप में थोड़ा सुधार है क्योंकि आप $scope वैरिएबल का उपयोग करके यह जान सकते हैं कि आपका फॉर्म सबमिट किया गया है या नहीं। यह त्रुटि संदेश प्रदर्शन पर बेहतर व्यवहार सुनिश्चित करता है।

HTML:

<div ng-if="myForm.myName.$invalid && (myForm.$submitted || myForm.myName.$touched)" 
    ng-messages="myForm.myName.$error" style="color:red" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
    <div ng-message="maxlength">Your field is too long</div> 
</div> 

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

$scope.submitForm = function() { 
    if (myForm.$valid) { 
     alert('Form submitted - fields passed validation'); 
    } 
}; 

myForm.$submitted स्वचालित रूप से सही

और अंत में करने के लिए स्थापित किया जाएगा, उसी रूप लागू प्रपत्र टैग पर विधि सबमिट करें:

<form name="myForm" novalidate ng-submit="submitForm()"> 

Answer 3

मेरे लिए यह बस में उपयोग करने के लिए पर्याप्त था एनजी-अगर $ फार्म के राज्य प्रस्तुत (उदाहरण के barebones है):

// and in the submit btn 
 

 
scope.submit = function() { 
 
    scope.myForm.$setSubmitted(); 
 
    if (scope.myForm.$valid) { 
 
    // do something 
 
    } 
 
}

<div ng-if="myForm.$submitted || myForm.attr.$touched" ng-messages="myForm.attr.error"> 
 
    <!-- messages with ngMessages --> 
 
</div>