Angular form validation not working properly

All we need is an easy explanation of the problem, so here it is.

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);
    };
});

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

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

Method 2

Use the form name and input name attribute, not ng-model

Give the input a name and use it with form name.

Check the first input in following example.

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

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply