0

I already saw questions like, How to set a particular field in a form to dirty in angularjs 1.3 and Angular.js programmatically setting a form field to dirty but they are not working.

I am auto-filling a text box in angularjs as:

$scope.address.city = "Santa Clara";

$scope.address.city.$dirty = true;

And in the html I have ng-model="address.city" ng-model-options="{ updateOn: 'change blur' }".

However, $scope.address.city.$dirty = true; is giving undefined in the console.

I have used

$http.get("somewebsite.com").success(function(data){ $timeout(function () { $scope.address.city.$dirty = true; }, 0); console.log('$scope.address.city.$dirty',$scope.address.city.$dirty);})

but still I am getting error as TypeError: Cannot set property '$dirty' of undefined

I am using angular 1.3.1 .

Community
  • 1
  • 1
Tehreem
  • 476
  • 9
  • 23

2 Answers2

1

In Html,

<form name="formName">
    <input type="text" name="city" ng-model="address.city" 
    ng-model-options="{ updateOn: 'change blur' }" />
</form>

In controller,

$timeout(function () {
    $scope.formName.city.$dirty = true;
}, 0);

note that name attributes are used not the model names.

here is the DEMO

Kalhan.Toress
  • 21,683
  • 8
  • 68
  • 92
  • your code will always work because you are using angular 1.2, `ng-model-options="{ updateOn: 'change blur' }"` supported in 1.3+ – Pankaj Parkar May 05 '15 at 08:02
  • problem is not about `ng-model-options` should work in 1.3 also http://plnkr.co/edit/2qbHmf2CyGjFP9FMIJ1R?p=preview – Kalhan.Toress May 05 '15 at 08:17
  • i have used `$http.get("website.com").success(function(data){ and inside this I have to make the text box dirty. I have kept timeout function here})`but still I am getting error as `TypeError: Cannot set property '$dirty' of undefined` – Tehreem May 05 '15 at 08:44
  • are u sure ur using the `names` in the `form` and the `input` ? – Kalhan.Toress May 05 '15 at 08:47
  • @K.Toress see my answer..and this plunkr http://plnkr.co/edit/Q60gcwO5zjq2Hu1g1GJA?p=preview..he is overriding address variable from ajax call which was already associated with form – Pankaj Parkar May 05 '15 at 09:02
0

You must have missed name attribute on either form or field. You form name should be address & field name should be city then only you can access $scope.address.city.$dirty in controller scope or UI

Markup

<form name="address">
    <input type="text" name="city" ng-model="address.city" 
    ng-model-options="{ updateOn: 'change blur' }" />
</form>

It could use on html as address.city.$dirty & inside controller it would be $scope.address.city.$dirty

Update

In your case form name address scope is conflicting with your address, you are overriding the address scope variable which already contains form object. So after overriding it all the form property gets erased. See my plunkr in which I reproduced your issue exactly what I'm doing there.

Plunkr with Issue

<form name="form">
    <input type="text" name="city" ng-model="address.city" 
    ng-model-options="{ updateOn: 'change blur' }" />
</form>

Controller

$timeout(function () {
    $scope.form.city.$dirty = true;
}, 0);

Fixed plunkr.

Pankaj Parkar
  • 134,766
  • 23
  • 234
  • 299
  • I haven't missed it. The form name is address and the name of the text is city. :( still $scope.address.city.$dirty is giving undefined. – Tehreem May 05 '15 at 07:59
  • ohh.sorry that my bad..your form name is conflicting with your scope variable `address` you need to change your form name – Pankaj Parkar May 05 '15 at 08:21
  • as far I know, the problem is not in naming. I have added few more details in the question. – Tehreem May 05 '15 at 08:45
  • @Tehreem do look at my edit..both the plunkr..`address.city` is converted to object because you have added $dirty property to it..when they have same name of `address` as form name & `address` as scope variable name – Pankaj Parkar May 05 '15 at 08:54
  • @Tehreem did you looked at my answer? – Pankaj Parkar May 07 '15 at 06:07