Köşeli form doğrulaması düzgün çalışmıyor

Question

Üzerinde iyonik açısal ve uygulamalı doğrulamalar şeklinde bir form oluşturdum.Vali işlemler düzgün çalışmıyor.Tüm kontrol düğmesi çağrıları gönder düğmesine tıklandığında tüm alanlar boştur. Lütfen bu sorunu çözmek için bana yardımcı olun.

html kodu

<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> 

Bu

<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> 

Formu adı register_form olduğunu çalışması gerekir

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

Answer 1

Kontrolör kodu,

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

Girdi adı, user_first_name olduğunu

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

Yani doğrulama

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

Modeli kendisi $invalid veya $pristine özelliklere sahip değildir bu alanlar geçmelidir, bu nedenle anlamda yapmaz

Telefon alanı için

daha fazla okuma için

, ödeme this answer

Answer 2

Kullanım form name ve input name değil, öznitelik ng-model

girişi bir ad verin ve form adıyla kullanabilirsiniz.

Aşağıdaki örnekteki ilk girişi kontrol edin.

<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>