कोणीय फॉर्म सत्यापन ठीक से काम नहीं कर रहा है

Question

मैंने आयनिक-कोणीय और लागू मान्यताओं में एक फॉर्म बनाया है। वैधता ठीक से काम नहीं कर रही हैं। सबमिट करने के बटन पर सभी फ़ील्ड खाली हैं, यह नियंत्रक फ़ंक्शन को कॉल करता है। कृपया इस समस्या को हल करने में मेरी मदद करें।

एचटीएमएल कोड

<ion-pane> 
<ion-header-bar class="bar-stable"> 
<h1 class="title">Register</h1> 
</ion-header-bar> 
<ion-content > 
<form name="register" ng-submit="submitDetails(user)" novalidate=""> 
    <div class="list"> 
     <label class="item item-input item-floating-label" style="position:relative;"> 
      <span class="input-label">First Name</span> 
      <input type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true"> 
      <p ng-show="user.firstName.$invalid && !user.firstName.$pristine" class="help-block">You name is required.</p> 
     </label> 
     <label class="item item-input item-floating-label"> 
      <span class="input-label">Email</span> 
      <input type="email" placeholder="Email" ng-model="user.email" ng-required="true"> 
      <p ng-show="user.email.$invalid && !user.email.$pristine" class="help-block">Enter a valid email</p> 
     </label> 
     <label class="item item-input item-floating-label"> 
      <span class="input-label" >Phone no</span> 
      <input type="number" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true"> 
      <span class="help-block" ng-show="user.phone.$error.required || user.phone.$error.number">Valid phone number is required</span> 
      <span class="help-block" ng-show="((user.phone.$error.minlength || user.phone.$error.maxlength) && user.phone.$dirty) ">phone number should be 10 digits</span> 
     </label> 
     <input type="submit" class="button button-royal" value="register"> 
    </div> 
</form> 
</ion-content> 
</ion-pane> 

नियंत्रक कोड

chatApp.controller('RegisterCntrl', function($scope, $stateParams) { 
    $scope.user={}; 
    $scope.submitDetails=function(user){ 
     alert("user"+user.firstName); 
    }; 
}); 

Answer 1

यह काम करना चाहिए

<form name="register_form" ng-submit="submitDetails(user)" novalidate=""> 
    <div class="list"> 
     <label class="item item-input item-floating-label" style="position:relative;"> 
      <span class="input-label">First Name</span> 
      <input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true"> 
      <p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p> 
     </label> 
     <!--omitted--> 
     <input type="submit" class="button button-royal" value="register"> 
    </div> 
</form> 

पर्चा नाम register_form है,

<form name="register_form" ng-submit="submitDetails(user)" novalidate=""> 

इनपुट नाम user_first_name है,

<input type="text" name="user_first_name" placeholder="First Name" ng-model="user.firstName" ng-required="true"> 

तो मान्यता उन खेतों से होकर गुजरना होगा

<p ng-show="register_form.user_first_name.$invalid && !register_form.user_first_name.$pristine" class="help-block">You name is required.</p> 

मॉडल ही $invalid या $pristine गुण नहीं है, तो यह मतलब नहीं है

फोन फ़ील्ड के लिए

<input type="number" name="user_phone" placeholder="Phone No" ng-model="user.phone" ng-minlength="10" ng-maxlength="10" ng-required="true"> 
<span class="help-block" ng-show="register_form.user_phone.$error.required || register_form.user_phone.$error.number">Valid phone number is required</span> 
<span class="help-block" ng-show="((register_form.user_phone.$error.minlength || register_form.user_phone.$error.maxlength) && register_form.user_phone.$dirty) ">phone number should be 10 digits</span> 

आगे रीडिंग के लिए, चेकआउट this answer

Answer 2

उपयोग form name और input name विशेषता, नहीं ng-model

इनपुट एक नाम दें और प्रपत्र नाम के साथ उपयोग करें।

निम्नलिखित उदाहरण में पहला इनपुट देखें।

<label class="item item-input item-floating-label" style="position:relative;"> 
    <span class="input-label">First Name</span> 
    <input name="firstName" type="text" placeholder="First Name" ng-model="user.firstName" ng-required="true"> 
    <p ng-show="register.firstName.$invalid && !register.firstName.$pristine" class="help-block">Your name is required.</p> 
</label>