Manually trigger validation about angular-form-for HOT 11 CLOSED

Available via release 1.2.6

Example usage here:
http://bvaughn.github.io/angular-form-for/#/demo/form-metadata

from angular-form-for.

Hey Nick. Interesting feature request.

Technically this is already possible using the ModelValidator. (It's the service the FormFor directive uses to determine if a field/fields are valid.)

Each time an individual field changes, ModelValidator.validateField() is called for that field. (This method returns a promise that is resolved or rejected with a validation error.) When the form is submitted, ModelValidator.validateFields() is called with the set of fields. Of course collections throw a bit of an extra curve in here because they're validated separately.

I could expose the function FormFor uses to wrap up all of the validations and bundle it along as a controller method. Assume you specified a bindable property for controller then you could call it like controller.validateForm() and it would return a promise.

Would that suffice? (This method wouldn't go on to submit a form or anything, it would just tell you whether the form was valid.)

from angular-form-for.

Awesome, love it. Thanks for all the hard work.

from angular-form-for.

No problem!

Thank me by telling a developer friend about formFor sometime :)

from angular-form-for.

Hey. I have a need for that new validateForm method, but I need it to highlight the fields and display the error messages on the screen so the user knows what to fix (just like a normal submit, but without doing the submit). Is that possible?

Thanks! And we really like your formFor module. Great job!

from angular-form-for.

Thanks for the compliment @walter4dev

Hmm.... formFor doesn't really support that case, but I could add it in. :)

I wonder if you couldn't just call form.submit() in that even though? Wouldn't that be the same result?

You wouldn't want to auto-submit a valid form but...calling submit on an invalid form would just cause it to display the error messages.

from angular-form-for.

Hello @bvaughn,

Thanks for the response!

tl;dr: calling angular.element('form').trigger('submit') from angular control will submit the form and trigger validation. So the validation requirement is satisfied. However it does not lock the form. Can the locking behavior be fixed so that the form is locked when submitted with angular.element('form').trigger('submit')?

Long version:
My use case is I need a single form to be submitted for multiple actions. So I need the form validated, a chance to set some flag, and then the form submitted (or at least the data sent to the server, not entirely necessary to submit the form).

I have a working solution now where the buttons on the form call controller methods that set the flag and then call angular.element('form').trigger('submit') to submit the form. The submit-with on the form calls a method that knows how to handle the flags. Calling angular.element('form').trigger('submit') triggers the formFor validation.

I thought this was working fine until I realized that what's missing now is that the form is not locked while waiting for a server response. It just so happens that some of the behavior can involve a somewhat long delay so the form locking is required - both to lock the form and also indicate the form has been submitted.

Fixing the locking behavior so that the form is locked when angular.element('form').trigger('submit') is called would be great.

I really appreciate having your software available. Thanks again!

from angular-form-for.

@bvaughn - no change required! It was my fault, my form submit method was not returning a promise. That fixed it. Working great.

from angular-form-for.

Hey, fantastic! I'm glad to hear that you were able to get it working! :)

from angular-form-for.

Hey all.

An FYI for any one who is using:
angular.element('form').trigger('submit');

You should give your form an ID and then use (replace yourFormId with your form ID, but leave the # prefix):
angular.element('#yourFormId').trigger('submit');

That way you'll be sure to only submit the correct form. Using the former was submitting my form but also other forms as well. Resulting in a page refresh and a difficult bug to track down.

Cheers!

from angular-form-for.

Nice word of caution, Walter :)

from angular-form-for.