Angular js ng messages show error on init

Question

In my project I have angularjs 1.5.10 and ng-messages 1.5.10. I use it in simple form:

<form class="form-horizontal" ng-submit="createBooking()" role="form" name="createBookingForm" novalidate>
    <div class="form-group">
                            <label for="payment_details_last_name" class="col-sm-3 control-label">Last name</label>
                            <div class="col-sm-6">
                                <input type="text"
                                       id="payment_details_last_name"
                                       name="payment_details_last_name"
                                       class="form-control"
                                       ng-model="payment_details.last_name"
                                       ng-required="true"
                                       ng-maxlength="30" />
                                <div ng-messages="createBookingForm.payment_details_last_name.$error" role="alert">
                                    <div ng-message="required">This field is required</div>
                                    <div ng-message="maxlength">Your field is too long</div>
                                </div>
                            </div>
                            <div class="col-sm-3"></div>
                        </div>
</form>

In controller:

$scope.members = [{
      'first_name': '',
      'last_name': '',
      'email': '',
      'phone_number': '',
      'date_of_birth': '',
    }];

And on initial I always see error This field is required. I tried to create empty object in controller:

$scope.createBookingForm = {};

I also show form after initialized <div ng-if="initialized">

Nothing is working. Project using angular-seed skeleton

I saw dirty hacks like if $touched else, but I want to understand what is wrong...

Majesty · Accepted Answer · 2018-12-22T21:12:58.993

Nothing is wrong about it, check out the sample in the official guide. They have required error shown by default. It seems wrong for the first glance, but this is the only correct way to handle such a case.

So basically, ng-messages does exactly what docs says:

ngMessages is a directive that is designed to show and hide messages based on the state of a key/value object that it listens on.

the directive works in a real time and shows errors for current input state, that makes sense. So if you want no messages to be shown by default, you should use some of approaches, discussed hundred of times

How to make ngMessage for required fields only show when dirty or submitting a form?

Angular : ng-message validation on submit click

AngularJS: Hiding ng-message until hitting the form-submit button

AngularJS 1.5.6 reset form & ng-messages

If you need some other improved behavior - there is no quick solution at the moment, you have to come up with your own validation engine that fit your needs.

Angular js ng messages show error on init

1 Answers1