Angular form validation not working properly

Question

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

Solution 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

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

Comments

[Keshav]

yes its working but ng-minlength and ng-maxlength directive that i have applied on phone no. field is not working.

[Medet Tleukabiluly]

Use same approach, rename Form name, then add input name, then use them inside conditions

[Keshav]

I have used it as you have explained validation is working but directives(ng-minlength and ng-maxlength) are not working.

[Medet Tleukabiluly]

@Keshav updated, and added helpful link, that should help a lot

[Keshav]

I have used directives(ng-minlength and ng-maxlength) to restrict phone no to 10 digits but its still not working.