Angularjs form validation works only if changes made in the form fields

Question

Angularjs form validation works only if changes made in the form fields

I am trying to implement form validation using angularjs.Validation works correctly when user start to make changes in the form fields.But it doesn't show any error messages If clicked submit without entering anything.Here is the code

<form name="myform" ng-submit="register(user)" >
        <div class="list ">
            <label class="item item-input item-stacked-label">
                <span class="input-label">Name</span>
                <input type="text" placeholder="John Watson" ng-model="user.name" name="user_name" required>
                <span style="color:red;" ng-show="myform.user_name.$dirty&&myform.user_name.$error.required">Name required</span>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Mobile Number</span>
                <input type="tel" ng-minlength="10"  maxlength="10" ng-model="user.mobileno"  placeholder="77777777" name="user_mobileno"  required>
                <span style="color:red;" ng-show="myform.user_mobileno.$dirty&&myform.user_mobileno.$error.minlength">Please provide a valid mobileNo</span>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Service Provider</span><br><br>
                <select class="clearfix" style="width:100%; height:30px;" ng-model="user.svp_name" name="user_svp_name" required>
                    <option value="">Select one </option>
                    <option value="xxxx">xxxx</option>
                    <option value="xxxx">xxx</option>

                </select><br><br>
                <span style="color:red;" ng-show="myform.user_svp_name.$dirty&&myform.user_svp_name.$error.required">Select your service provider</span>
            </label>
            <label class="item item-input item-stacked-label">
                <span class="input-label">Email Id</span>
                <input type="email" ng-model="user.email" placeholder="john@example.com" name="user_email" required>
                <span style="color:red;" ng-show="myform.user_email.$dirty&&myform.user_email.$error.email">Please Provide a valid emailId</span>
            </label>

        </div>
        <div style="padding:0 10px;">
            <input type="submit"   class="button button-balanced button-block buttonradius" value="Register" />
        </div><br /><br />
        </form>

I've already refered these questions (AngularJS validation on submit only), (Form validation popup window message works only if change is made in Angularjs) ,but didnt help me

UPDATE Finally i found a solution but its not working as i expected.These are the changes

<span style="color:red;" ng-show="submitted&&myform.user_name.$error.required">Name required</span>
<input type="submit" ng-click="submitted=true" class="button button-balanced button-block buttonradius" value="Register" />

but only work in name and serviceprovider fields(shows the error messages if clicked submit without entering anything),not other two fields(mobileno,email).

javascript
android
angularjs
validation
ionic-framework

Answer 1

<span style="color:red;" ng-show="myform.user_name.$dirty&&myform.user_name.$error.required">Name required</span>

myform.user_name.$dirty is why it's only showing if the field was edited before submitting form. $dirty isn't set until the form field is changed.

What I usually do is put a failed boolean on my scope and after submit if the form is invalid I set $scope.failed = true;. So if you went that route, you would change your ng-shows to:

<span style="color:red;" ng-show="failed && myform.user_name.$error.required">Name required</span>

Controller:

$scope.register = function(user) {
  if ($scope.myForm.$invalid) {
    // Form is invalid
    $scope.failed = true;
    return;
  }
  delete $scope.failed;


  // Other submission logic
};