$submitted is not set on sub ng-form

[luboid]

Hi,

I have <form> with inner <ng-form>
when form is submitted inner <ng-form>.$submitted is not set to true only parent

[pkozlowski-opensource]

I don't think we should expect the inner ngForm to behave exactly like the <form> thing. I guess we could fix this one but would be cool to know what is your real-life use-case?

[luboid]

Hi

I create wizard interface,
there are two directives, which I use to show errors after form is submitted

        .directive('bkErrorText', function () {
            return {
                require: '^form',
                template: '<span></span>',
                restrict: 'E',
                link: function ($scope, $element, $attrs, ctrl) {
                    var inputCtrl = ctrl[$attrs.bkInputName];
                    if (!inputCtrl) {
                        throw 'Can\'t find input ' + $attrs.bkInputName + ' into form.';
                    }

                    function showErrorText(newValue, oldValue) {
                        if (inputCtrl.$invalid && (ctrl.$submitted || ctrl.$$parentForm.$submitted)) {
                            var i, key, e, etext = [], error = inputCtrl.$error;
                            for (i in error) {
                                if (error[i]) {
                                    key = 'bkMsg' + angular.uppercase(i.charAt(0)) + i.substr(1);
                                    e = $attrs[key] || (key + ' no message text!');
                                    etext.push(e);
                                    etext.push('&nbsp;');
                                }
                            }
                            $element.html(etext.join(''));
                            $element.removeClass('hidden');
                        }
                        else {
                            if (!$element.hasClass('hidden')) {
                                $element.addClass('hidden');
                                $element.html('');
                            }
                        }
                    };

                    $scope.$watchCollection(function () { return inputCtrl.$error; }, showErrorText);
                    $scope.$watch(function () {
                        return inputCtrl.$invalid && (ctrl.$submitted || ctrl.$$parentForm.$submitted);
                    }, showErrorText);
                }
            };
        })
        .directive('bkHasError', function () {
            return {
                require: '^form',
                restrict: 'A',
                scope: {
                    bkHasError: '@',
                    bkHasErrorClass: '@'
                },
                link: function ($scope, $element, $attrs, ctrl) {
                    var cssClass = $scope.bkHasErrorClass || 'has-error',
                        inputCtrl = ctrl[$scope.bkHasError];

                    $scope.$watch(function () {
                        return inputCtrl.$invalid && (ctrl.$submitted || ctrl.$$parentForm.$submitted);
                    }, function (newValue, oldValue) {
                        if (newValue) {
                            $element.addClass(cssClass);
                        }
                        else {
                            $element.removeClass(cssClass);
                        }
                    });
                }
            };
        })

<form class="form-horizontal" role="form" novalidate="novalidate" ng-submit="submitForm()">
    <tabset>
        <tab select="tabs['common']=true" deselect="tabs['common']=false" active="tabs['common']">
            <tab-heading ng-class="{'text-danger':tabsValid['common']===false}">
                Общи
            </tab-heading>
            <ng-form name="common" bk-submit-valid="tabsValid['common']">
                <div class="form-group" bk-has-error="amountBuy">
                    <label class="col-md-2 control-label" for="amountBuy">amountBuy</label>
                    <div class="col-md-3">
                        <input class="form-control bk-number-lg" id="amountBuy" name="amountBuy" type="text"
                               ng-model="model.amountBuy"
                               bk-number="15,2"
                               bk-number-range="0.01,999999.99"
                               ng-model-options="{ debounce: 300 }" />
                        <bk-error-text class="help-block"
                                       bk-input-name="amountBuy"
                                       bk-msg-required="Data is required ..."
                                       bk-msg-number="Number(15,2) ..."
                                       bk-msg-number-range="Number range from 0.01 to 999 999.99 ..." />
                    </div>
                </div>
                <!--
                    others input fields
                -->
            </ng-form>
        </tab>
        <!--
            others tabs
        -->
    </tabset>
    <div class="col-md-offset-2 col-md-6">
        <button class="btn btn-default" type="button" ng-click="prevTab()">Prev</button>
        <button class="btn btn-default" type="button" ng-click="nextTab()">Next</button>
        <button class="btn btn-primary" type="submit" bk-disable-pristine>Save</button>
    </div>
</form>

[awerlang]

Another approach is using css:

.ng-submitted .ng-invalid {
.... styles styles styles ...
}

or looping through all parent forms:

while (form) form = form.$$parentForm;

[kwypchlo]

👍 I would like to see that too

My rl scenario is that I have a form where I have directive that uses ng-form and inside it I also have another directive with some input fields. That second (most inner) directive requires form controller in link function and it is the form controller from the ng-form directive. I have validation messages showing on submitted form but the only form that gets $submitted flag is the most outer form. The ng-form controller has $submitted set to false and the validation messages are not shown.

[awerlang]

@kwypchlo does the css I posted above solve your issue?