Validation on Submit not being invoked in a nested form

[Werick]

Hi, validation on submit works very well on the fields that not in a nested form or even in custom section. Is there a way we can allow validation in nested form or section be triggered too on submit? I would be happy to have this feature since all the fields in my form are in a nested form.

I also noticed that on extended data type fields the shape surrounding the field does not change color to red when the validation rule is violated (e.g if you set the field as required, it should change the color to red if it left blank or untouched)

Thanks

Erick

[Werick]

Here is an example that looks similar to what I have http://angular-formly.com/#/example/other/nested-formly-forms

[kentcdodds]

This is the problem... angular/angular.js#11023

Perhaps there's something we can do on the angular-formly side to make this easier (particularly for versions of angular where this PR wont make it). What do you think @ckniffen?

[ckniffen]

@kentcdodds the issue with patching this is that the formController does not expose the array of controls. There is some conventions that can be used to infer if a property on the form controller is a control. ckniffen/angular.js@e549f2d#diff-1838ed9bd28307b6d42de98549826ae5R304 uses controls which is a locally scoped variable.

The form could have all of its properties looped through and check every one that doest have a key that starts with $ checked for the some NgModel or FormController properties and then call $setSubmitted.

[kentcdodds]

I feel like I've done that before and it worked out alright. We'd probably
need to add a watcher for the parent form's submitted state to call that.
Unfortunately, there's no way to detect whether this watcher is necessary
(most of the time it won't be), so we'd want it to be opt-in... The more I
think about it, the more I think it should probably be a plugin...

• Kent C. Dodds

(Sent from my mobile device, please forgive typos or brevity)
On Sep 14, 2015 10:21 AM, "Caleb Kniffen" notifications@github.com wrote:

@kentcdodds https://github.com/kentcdodds the issue with patching this
is that the formController does not expose the array of controls. There is
some conventions that can be used to infer if a property on the form
controller is a control. ckniffen/angular.js@e549f2d
#diff-1838ed9bd28307b6d42de98549826ae5R304
ckniffen/angular.js@e549f2d#diff-1838ed9bd28307b6d42de98549826ae5R304
uses controls which is a locally scoped variable.

The form could have all of its properties looped through and check every
one that doest have a key that starts with $ checked for the some NgModel
or FormController properties and then call $setSubmitted.

—
Reply to this email directly or view it on GitHub
#465 (comment)
.

Can you accomplish the same look with separate form elements instead of nesting? I've done this with tab based forms and formly. So each tab is form and can be validated either separately or in master check of all the forms.

[ckniffen]

I am making some progress at getting my PR in for angular. In the mean time I think something can be done in

angular-formly/src/directives/formly-form.js

Line 342 in 1edd105

const formId = attrs.name;

Something like

var originalSetSubmitted = scope.theFormlyForm.$setSubmitted;
scope.theFormlyForm.$setSubmitted = function(){
  originalSetSubmitted();

  angular.forEach(parentForm, function(control){
    if (control.$setSubmitted) {
      control.$setSubmitted();
    }
  });
}