为什么 myForm.$submitted 不能用于 ng-messages 而是用于 ng-if？

Question

I am trying to validate my Form when there is a keypress and also when it its submitted.For that purpose i am writing this code :-

<form name="myForm" ng-submit="submit()" novalidate>
    <input type="email" name="email" ng-model="email" required/>
    <div ng-messages="myForm.$submitted">
        <span ng-message="required">Please enter details in these field</span>
        <span ng-message="email">Please enter email</span>
    </div>
    <button type="submit">Save</button>
</form>

There is a success message in submit function :-

$scope.submit = function(){
   console.log("Update Successful");
}

Even if i haven't fill the required field and press Save i still get the "Update Successful" message.So,why doesn't the validation work and why is the submit function even if the validation fails.

Also i found these solution of doing it these way :-

<form name="myForm" ng-submit="myForm.$valid && submit()"  novalidate>
    <input type="email" name="email" ng-model="email" required/>
    <div ng-messages="myForm.email.$error" ng-if="myForm.$submitted">
        <span ng-message="required">Please enter details in these field</span>
        <span ng-message="email">Please enter email</span>
    </div>
    <button type="submit">Save</button>
</form>

This works fine but problem is,it should also validated on keypress.However,it only validates on keypress after i have sumbitted the form atleast once before that keypress validation doesn't work. How should i solve these? I was also trying myForm.$touched but even that doesn't work when i use it as :-

<div ng-messages="myForm.$touched">
    ...
</div>

Answer 1

Try this:

In html:

<form name="myForm" novalidate>
    <input type="email" name="email" required/>
    <div ng-messages="myForm.email.$error" ng-if="myForm.email.$touched || valid">
        ...
    </div>
    <button ng-click="submit(myForm.$valid)">Save</button>
</form>

In controller:

$scope.submit(valid)
{
    valid ? $scope.validCheck = false : $scope.validCheck = true;
}

Answer 2

There is a little something that you've missed in implementing AngularJS 's form validation.

From the code you've provided, your form, as it seems, is using the default HTML5 form validation and NOT AngularJS form validation.

How?

In order to be able to wire up with AngularJS form validation (technically adding it as a property to the form directive), in addition to the name attribute of the form control, ng-model attribute is also required .

Meanwhile, to disable HTML5 default validation behavior, novalidate attribute must be added to the form tag.

To be able to achieve your expected behavior from the form ( ie validation on key press as well as on submission , if I'm right) you can implement a combination of yourForm.$dirty and yourForm.$submitted properties:

<div ng-messages="myForm.email.$error" ng-if="myForm.$dirty || myForm.$submitted">
    <p ng-message="required">Please enter details in these field</p>
    <p ng-message="email">Please enter email</p>
</div>

Demo