Support 'submit' updateOn trigger for forms when using ng-model-options

[shahata]

This seems important since when we have inputs that pend updates using ng-model-options we still want all changes to take place immediately if the form is submitted.

I'll have a PR ready with this probably this week.

This can be also very useful since ppl will no longer need to have shadow copies of objects while they let users edit an object in a form. The changes will be flushed only when the form is submitted if they use something like {updateOn: 'submit', validateOn: 'default'} (see #7016)

[lrlopez]

Hi Shahar,

As we discussed yesterday (and also on the old pull request, you can force all changes to take place when submitting using the existing code.

I.e.: If you want to debounce the changes but trigger an immediate update on blur or when submitting you could do this:
{ updateOn: 'submit default blur', debounce: {submit: 0, default: 500, blur: 0} }

Another subject is decoupling the model update from validation as you suggest. This is a delicate issue because, until now, updates and validation take place at the same time. It's a nice idea though!

[lrlopez]

There is an ongoing discussion on this on #6740. We could continue the brainstorming there if you like.

[shahata]

@lrlopez - I tested {updateOn: 'submit'} in http://plnkr.co/edit/g0QxDS?p=preview and it doesn't work, but I'm not surprised since I don't believe the input fields get the submit event... We will need to either pass the submit button to the inputs on the DOM (which I'm not a fan of) or find some way around it (which I don't believe is difficult if we put our minds to it)

[lrlopez]

You're right. I've just confirmed that submit won't be emitted to input fields.

At first sight we could use a simple solution: <form> will get event though so we could add the event to the form control instead of to the input.

I.e.: Adding this to ngModelOptionsDirective:

        var SUBMIT_REGEXP = /(\b|^)submit(\b|$)/;

        // extract "submit" pseudo-event from list of events that can trigger a model update
        this.$options.updateOn = this.$options.updateOn.replace(SUBMIT_REGEXP, function() {
          that.$options.updateOnSubmit = true;
          return ' ';
        });

On ngModelDirective:

      // Pass the form controller to the ng-model controller
      if ( formCtrl ) {
        modelCtrl.$form = ctrls[2].formCtrl;
      }

And then, on the input directive:

  // Allow submit events on the parent form
  if (ctrl.$options && ctrl.$form && ctrl.$options.updateOnSubmit) {
    ctrl.$form.on('submit', listener);
  }

Of course, assigning the form controller to the model controller is rough, but it's a first approximation 😄

What do you think? It's monkey patching, but it could work.

[shahata]

Yes, this is more or less the direction I was going for. There are some edge cases to be considered here (for example, we want all the updating of the model to be done before ng-submit is executed, or probably even more complicated before ng-click of the submit button is executed), but I'm sure I'll get around those issues. Hopefully I will have something ready for review before the end of this week.

[dmackerman]

So, running into this now - but is there an easy to to just tell inputs to not validate until submit? I'm using ngMessages as well.

[thany]

Running into this as well, 2 years later. Do we have a way to achieve this?

[Narretz]

The original use-case is definitely possible. If you use ng-model-options="{updateOn: ''}" then the scope will only be updated when the form is submitted: http://plnkr.co/edit/LeZqYV?p=preview

However, parsing and validation will also only happen then. This is a different issue that is tracked here: #7016 due to low demand, it hasn't been added.