Example of validation on form submit

[m0t0r]

Hi, I have been trying to setup angular-formly to show validation messages on form submit but unfortunately I can't figure out.
I try to set a form as following:

<form name="vm.form" ng-submit="vm.save(vm.model)" novalidate>
    <formly-form form="vm.form" model="vm.model" fields="vm.fields">
        <button translate type="submit" class="btn btn-primary">Save</button>
    </formly-form>
 </form>

and then use form reference in ng-messages template:

<script type="text/ng-template" id="error-messages.html">
      <formly-transclude></formly-transclude>
      <div ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched" class="error-messages">
        <div ng-message="{{ ::name }}" ng-repeat="(name, message) in ::options.validation.messages" class="message">{{ message(fc.$viewValue, fc.$modelValue, this)}}</div>
      </div>
    </script>

but form state properties never update.

[kentcdodds]

Actually, someone ran into this same issue on twitter the other day: https://twitter.com/kentcdodds/status/601765588533317632

Here's an example with an explanation of what the problem is: http://jsbin.com/mepega/edit?html,js,output

TL;DR

Don't specify a form attribute on the formly-form with the same name. Just leave it off altogether or change the name.

Please re-open this issue if that doesn't fix your problem :-)

[m0t0r]

@kentcdodds thank you very much for your super quick response but I still have a question. How can I get a reference to the form in ng-messages template ?

[kentcdodds]

You have it, right in your template. It's the fc variable (which is a shortcut to the options.formControl variable).

[m0t0r]

@kentcdodds thank you for your reply but fc variable does not contain $submitted property. I still can not find a way to validate form on submit with angular-formly. I can get form state in a controller but I cannot find a way to get a reference for ng-messages. Could you help me further, please ?

[kentcdodds]

Ah, I see what you're saying. @ckniffen mentioned this angular issue on Gitter the other day. The problem is that the formController's parent is $submitted but that property doesn't get propagated down to children forms. @ckniffen, do you have a recommendation on how to handle this? One thing I can think of is to $watch the $submitted state and set it on the child forms manually...

[robwalkerco]

@m0t0r Did you get the validate on submit to work in the end? If so, would you mind sharing an example of how, as I'm struggling with the same problem you encountered. Thanks

[m0t0r]

@papertrailrob Yes, I've created an example. @kentcdodds may be it is a good idea to post this example in the website as a use case ?

[kentcdodds]

Awesome! Feel free to make a PR 👍