Xác thực biểu mẫu góc không hoạt động đúng

Question

Tôi đã tạo biểu mẫu trong xác thực góc và được áp dụng trên it.Validations không hoạt động đúng cách. Mặc dù tất cả các trường đều trống khi nhấp vào nút gửi, nó gọi hàm điều khiển. Hãy giúp tôi giải quyết vấn đề này.

mã html

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

đang điều khiển

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

Answer 1

này nên làm việc

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

tên Form là register_form,

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

tên Input là user_first_name,

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

Vì vậy, xác nhận phải đi qua những cánh đồng

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

mẫu tự nó không có $invalid hoặc $pristine tính, vì vậy nó không có ý nghĩa

Đối với trường điện thoại

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

Đối với bài đọc thêm, thanh toán this answer

Answer 2

Sử dụng form name và input name thuộc tính, không ng-model

Cho đầu vào một tên và sử dụng nó với tên form.

Kiểm tra đầu vào đầu tiên trong ví dụ sau.

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