Angular.js: $setDirty() on form does not propogate to children form elements

user_1946765 0
Viewed 16893

I have a form that I am validating with Angular.js and I want to pragmatically set the dirty state on a child element of a form. However, the child element is in an isolated scope in a directive. How can I set that input element to ng-dirty from the parent scope?

Example code: 

<form name="parentForm">

   <!-- How can I validate an input element inside this directive--> 
   <childDirective required />

</form>

Example Child Directive:

<div>
  <input type="text" ng-form name="childForm" required/>
</div>
angularjs forms javascript
2 Answers

I made a utility method in Typescript to handle this in a more holistic way. This can $setDirty on all elements with an error at any depth. I know you're asking about a specific field in your question, but this could be a more useful tool for certain problems you may be solving for.

class AngularFormUtil
{
    static RecursiveSetDirty(form: ng.IFormController)
    {
        form.$setDirty();
        for (let errorProp in form.$error)
        {
            if (!form.$error.hasOwnProperty(errorProp))
                return;

            for (let error of form.$error[errorProp])
            {
                if (error.$setDirty) {
                    AngularFormUtil.RecursiveSetDirty(error);
                }
            }
        }
    }
}

Just plug in the form:

AngularFormUtil.RecursiveSetDirty($scope.parentForm);

Plain JS compiled version:

var AngularFormUtil = (function () {
    function AngularFormUtil() {
    }
    AngularFormUtil.RecursiveSetDirty = function (form) {
        form.$setDirty();
        for (var errorProp in form.$error) {
            if (!form.$error.hasOwnProperty(errorProp))
                return;
            for (var _i = 0, _a = form.$error[errorProp]; _i < _a.length; _i++) {
                var error = _a[_i];
                if (error.$setDirty) {
                    AngularFormUtil.RecursiveSetDirty(error);
                }
            }
        }
    };
    return AngularFormUtil;
}());
user_22830500
Related