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

Question

This is a typical example of the use of ng-messages in AngularJS (1.x):

<form name="demoForm">
  <input name="amount" type="number" ng-model="amount" max="100" required>

  <div ng-messages="demoForm.amount.$error">
    <div ng-message="required">This field is required</div>
  </div>

  <button type="submit">test submit</button>
</form>

see: http://jsfiddle.net/11en8swy/3/

I now want to change this example so the "This field is required" error only shows when the field is touched ($touched) or the user hits the submit button.

I cannot use the ng-submitted class on the form since the validation error prevents the submitting of the form.

How should I do this?

Thanks

You can set form to `pristine` state on init, in your controller, and show ng-message on $dirty. Or cycle through form fields, setting them to `pristine` That's how I've solved it in my case. — Kindzoku, Sep 16 '16 at 05:54

Shashank Agrawal · Answer 1 · 2016-09-16T06:25:24.153

1

You can do this using ng-show:

<div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched">
    <div ng-message="required">This field is required</div>
</div>

And use a custom directive. See a working demo:

var app = angular.module('app', ['ngMessages']);

app.controller('mainCtrl', function($scope) {

});
app.directive('hasFocus', function($timeout) {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, element, attr, ctrl) {
      element.on('focus', function() {
        $timeout(function() {
          ctrl.hasFocusFoo = true;
        })
      });

      element.on('blur', function() {
        $timeout(function() {
          ctrl.hasFocusFoo = false;
        })
      });
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-messages.js"></script>

<body ng-app="app" ng-controller="mainCtrl">
  <form name="demoForm">
    <input name="amount" type="number" ng-model="amount" max="100" required has-focus>

    <div ng-messages="demoForm.amount.$error" ng-show="demoForm.amount.$touched || demoForm.amount.hasFocusFoo">
      <div ng-message="required">This field is required</div>
    </div>

    <button type="submit">test submit</button>
  </form>
</body>

The directive is basically setting another hasFocusFoo field on the ngModel controller then we can easily use that directive.

edited Sep 16 '16 at 06:25

answered Sep 16 '16 at 06:00

Shashank Agrawal

25,161
11
89
121

I didn't get you. How the `$error` state matters here when you just want to show/hide the message on focus/blur – Shashank Agrawal Sep 16 '16 at 06:04
Does validation set untouched fields to `$touched` state? – Kindzoku Sep 16 '16 at 06:06
No `$touched` state is set when you lost focus from that field – Shashank Agrawal Sep 16 '16 at 06:10
This will not work, if the user does not update the field and hit the submit button, the form will not be submitted but the error will not show either. – mvermand Sep 16 '16 at 06:11
But what if he press submit without blurring the required field? The error stays hidden that way. – Kindzoku Sep 16 '16 at 06:12
@Kindzoku: that is exactly what I mean ;-) – mvermand Sep 16 '16 at 06:13
I do not really understand how/why the on-focus method is called when the submit button is pressed, but anyway, the example seems to work only with one field. I created an example with two fields: http://jsfiddle.net/cgtLznw7/6/ I hope I made a mistake, because it seemed the solution at first! – mvermand Sep 16 '16 at 08:09
Do you want to make it generic? – Shashank Agrawal Sep 16 '16 at 13:15

score 0 · Answer 2 · answered Sep 16 '16 at 06:49

0

Ah, at the PC at last.

https://plnkr.co/edit/EX3UmoAOKmTKlameBXRa?p=preview

<form name="mc.form">
    <input type="text" name="empty" ng-model="mc.empty" required />
    <label ng-show="mc.form.empty.$dirty && mc.form.empty.$error.required">i'm empty</label>
</form>

MainController.$inject = ['$timeout'];
function MainController($timeout) {
    var vm = this;

    $timeout(function(){
        vm.form.$setPristine();
    });

    vm.submit = function(){
        if(vm.form.$valid){
            alert('yay');
        }else{
            (vm.form.$error.required || []).forEach(function(f){
                f.$dirty = true;
            });
        }
    }
}

Here is how I handle this task in my solution. form.$setPristine() - sets the field in a pristine state, so field isn't $dirty and error hidden. But after submit I manually state required fields in a $dirty state, so errors become visible. + if you type something, and delete it after, the error would be visible without submitting a form.

answered Sep 16 '16 at 06:49

Kindzoku

1,368
1
10
29

This seems complex to implement on every form. If I understand correctly you will need to extend the check in the last else-branch for every field and every field error? – mvermand Sep 16 '16 at 08:11
Well, you just cycle only through errors of `required` type, setting em' to `$dirty` state. That's just for a case if you didn't touch the field before submitted it. Actualy in my solution I'm using a directive for this case, so it's very compact solution. – Kindzoku Sep 16 '16 at 08:15
I see, my mistake about looping over all fields. About the directive: (how) do you inject your code in the submit function of the controller from inside that directive? Do you have a code-sample? Thanks – mvermand Sep 16 '16 at 10:00
No, unfortunately I don't have a code-sample right now, but it's similar to this one http://stackoverflow.com/questions/26383507/listen-for-form-submit-event-in-directive – Kindzoku Sep 16 '16 at 10:20

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

2 Answers2

Linked