AngularJS | Login Required ngMessage - angularjs

Question

I'm wondering why my required messages are not hiding on load when a user first views my form?
My code is as per:
<div ng-messages="loginForm.username.$error" class="form-input-error">
<div class="message" ng-message="required">Please enter your username</div>
<div class="message" ng-message="maxlength">Username is too long.</div>
</div>
The ng-message="maxlength" doesn't appear until the requirement is met however, I don't understand why required is showing on load?
Ideally I would like the required message to display if the user tries to submit the form with none of the fields entered or if only one field has been entered. Essentially, meeting the required validation rules.
Here is a JSFIDDLE example

Answer 1

This is because angular validation will evaluate if the form meets the requirements on load and since there is no value in the required field then it's invalid. As the username is 0 characters it's less than the maxlength so that's valid.
By default for ng-messages angular will only show the first message that is invalid. In this case that is fine.
To prevent messages showing until submit is clicked you can set a scope property on submit and use a ng-show on the ng-messages to only show the validation message if submitted:
$scope.submitForm = function(isValid) {
$scope.submitted = true;
// Check to make sure the form is completely valid
if (isValid) {
alert('Form is valid');
}
};
<form name="loginForm" ng-controller="LoginCtrl" novalidate="novalidate" ng-submit="submitForm(loginForm.$valid)">
<div ng-messages="loginForm.username.$error" class="form-input-error" ng-show="submitted">
<div class="message" ng-message="required">Please enter your username</div>
<div class="message" ng-message="maxlength">Username is too long.</div>
</div>
JsFiddle