Cannot set a form field to dirty

Question

I've looked for an answer to this and come across several posts, but none of them are working for me.

I want to do something simple. I have a button that is invisible until the form is dirty. This works great if I manually dirty the form. However, I am saving the data. when the form is loaded, the saved data is populated, but the form isn't dirty when the backend data is updated this way.

So, I figured I'd just set the form to dirty manually. But I am receiving "undefined" errors.

$scope.myForm = > undefined
$scope.$myForm => undefined
myForm = > returns the form object
myForm.myField = > returns the field
myForm.myField.$dirty => returns undefined
myForm.myField.$setDirty() = > returns "$setDirty is not a function"
this (inside my controller) = > returns and empty object

I'm using angular 1.6.6 I've read: Angular.js programmatically setting a form field to dirty,

How to explicitly set a text box in a form to dirty?,

How to set a particular field in a form to dirty in angularjs 1.3

My basic form:

<div ng-controller="appCtrl">
    <form name="myForm">
        <input name="myField" ng-model="myField" />
        <div ng-click="doSomething()" ng-show="myForm.myField.$dirty">Submit</div>
    </form>
</div>

I've added a plunker that shows the issue that I am having. https://plnkr.co/edit/ZUWywfOj329g6sviHIZf?p=preview

Fetrarij · Accepted Answer · 2017-09-25T17:14:46.010

1

The issue is that the form is not still created in dom in the moment when the code in the controller is executed, so solution is to call your data initialization when the form is inited.

<form name="myForm" ng-init="formInit()">

controller:

$scope.formInit = function() {
    $timeout(function() {
      $scope.myForm.$setDirty(); 
    })
}

This will work.

Now I just want to say, why do you use dirty for displaying the submit form? Why not validation with required and myForm.$valid ?

Why not just using:

<div ng-controller="appCtrl">
    <form name="myForm">
        <input name="myField" ng-model="myField" />
        <div ng-click="doSomething()" ng-show="myField">Submit</div>
    </form>
</div>

edited Sep 25 '17 at 17:14

answered Sep 24 '17 at 03:32

Fetrarij

7,176
3
27
35

I was hopeful, but this didn't work. Logging the form value like this: $scope.myForm, still returns "undefined". Just as before, I can log myForm and will get the form's DOM element. My form has just one field, a dropdown/select. I don't want the user to be able to click the button until they've selected something. This works just fine, it's only when I pre-populate the field for them that I have an issue. – Wayne F. Kaskie Sep 25 '17 at 13:52
@WayneF.Kaskie did you added set the loading data in formInit? other possibility is if you use one selecbox you can check by the ngModel value. – Fetrarij Sep 25 '17 at 14:00
Thanks for helping me with this. I put the cod in a plunker to demonstrate the issue. – Wayne F. Kaskie Sep 25 '17 at 16:00
@WayneF.Kaskie https://plnkr.co/edit/lEissy?p=preview , I added timeout, but why not just using: ng-show="myField" – Fetrarij Sep 25 '17 at 17:13
THANKS Fetra! This works. I thought of a few different ways to handle this, since the form is so simple. But I know that this technique should be possible so I wanted to know how. – Wayne F. Kaskie Sep 25 '17 at 21:08

Cannot set a form field to dirty

1 Answers1