In my quest to tackle this issue in a more comprehensive manner, I developed a utility method using Typescript. This method is designed to mark all elements with errors as dirty, regardless of their depth within the structure. While your initial question pertains to a specific field, this tool could prove invaluable for addressing certain challenges you encounter.
class AngularFormHelper
{
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) {
AngularFormHelper.RecursiveSetDirty(error);
}
}
}
}
}
To implement this solution, simply invoke the method with your form:
AngularFormHelper.RecursiveSetDirty($scope.parentForm);
If you prefer using plain JavaScript, here is the compiled version:
var AngularFormHelper = (function () {
function AngularFormHelper() {
}
AngularFormHelper.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) {
AngularFormHelper.RecursiveSetDirty(error);
}
}
}
};
return AngularFormHelper;
}());