angular-formly example: {{vm.exampleTitle}}

This was originally created based on this tweet. It describes some of the nuances of <form>, <ng-form>, and <formly-form>

Below is an example of using the formly setTemplateWrapper feature to keep templates consistent. In this example, we add validation (using the validators api in combination with angular-messages) and we only need to add that in one place and it's exactly the same for all formly types.
This also demos how to specify different template wrappers for different types. Generally this is useful when you have multiple types using the same template wrapper, but it can be useful if you want to use the formly template without the wrapper (also demonstrated).

Using form attribute on a <formly-form> and putting ng-submit on a parent <form> will not work because the parent form is the one submitted, not the formly-form.

exampleForm1.$submitted: {{ exampleForm1.$submitted | json }}

It's just like using the name attribute on a nested <ng-form> with ng-submit on a parent <form>

exampleForm2.$submitted: {{ exampleForm2.$submitted | json }}

But if you put the name on the same <form> as the ng-submit is on, then $submitted gets updated as expected

exampleForm3.$submitted: {{ exampleForm3.$submitted | json }}

But if you try to put an ng-submit on an <ng-form> the statement wont even be called

exampleForm4.$submitted: {{ exampleForm4.$submitted | json }}

Which is why an ng-submit on a <formly-form> with a form doesn't work either (because it actually just replaces itself with an <ng-form>

exampleForm5.$submitted: {{ exampleForm5.$submitted | json }}

This is due to limitations with <ng-form>.

Solution 1: use name attribute on the parent <form> and pass the same value to the <formly-form>'s form attribute. <formly-form> will then use that exact same form (rather than the one it creates on its own)

exampleForm6.$submitted: {{ exampleForm6.$submitted | json }}

Solution 2: use name attribute on the parent <form> and don't specify the same name in the form attribute on the <formly-form> (because you probably don't even need the form attribute).

exampleForm7.$submitted: {{ exampleForm7.$submitted | json }}

Solution 3: Specify "form" as the root-el attribute on the <formly-form> which will have it use a <form> instead of an <ng-form>. Note: HTML doesn't allow nesting of <form>s. Which is why <ng-form> exists in the first place and why angular-formly uses it. You have been warned

exampleForm8.$submitted: {{ exampleForm8.$submitted | json }}

Solution 3: Modify this gist to add support for <ng-form which will make it work for <formly-form> as well. To be honest, this is probably not the best way to go about it though...

exampleForm9.$submitted: {{ exampleForm8.$submitted | json }}

Model

{{vm.model | json}}

Fields (note, functions are not shown)

{{vm.originalFields | json}}