Friday, May 17, 2024
 Popular · Latest · Hot · Upcoming
152
rated 0 times [  153] [ 1]  / answers: 1 / hits: 26608  / 9 Years ago, tue, september 1, 2015, 12:00:00

I have created a form in ionic-angular and applied validations on it.Validations are not working properly.Even all the fields are empty on click of submit button it calls controller function.
Please help me to solve this issue.



html code



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


Controller code



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

More From » angularjs

 Answers
9

This should work



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


Form name is register_form,



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


Input name is user_first_name,



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


So validation must pass through those fields



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


Model itself doesn't have $invalid or $pristine properties, so it doesn't make sense



For phone field



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


For further readings, checkout this answer


[#65237] Friday, August 28, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
danyelletyanah

Total Points: 204
Total Questions: 109
Total Answers: 108

Location: Vanuatu
Member since Fri, Oct 22, 2021
3 Years ago
;