21732

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

Question:

I already saw questions like, <a href="https://stackoverflow.com/questions/26222150/how-to-set-a-particular-field-in-a-form-to-dirty-in-angularjs-1-3" rel="nofollow">How to set a particular field in a form to dirty in angularjs 1.3</a> and <a href="https://stackoverflow.com/questions/18071648/angular-js-programmatically-setting-a-form-field-to-dirty" rel="nofollow">Angular.js programmatically setting a form field to dirty</a> 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 <strong>undefined</strong> 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 .

Answer1:

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 <a href="http://plnkr.co/edit/1KBuOv4lWVtC127UDzo2?p=preview" rel="nofollow">DEMO</a>

Answer2:

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

<strong>Markup</strong>

<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

<strong>Update</strong>

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.

<a href="http://plnkr.co/edit/Q60gcwO5zjq2Hu1g1GJA?p=preview" rel="nofollow"><strong>Plunkr with Issue</strong></a>

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

<strong>Controller</strong>

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

<a href="http://plnkr.co/edit/cdaktVVqznpW8imlMykU?p=preview" rel="nofollow"><strong>Fixed plunkr</strong></a>.

Recommend

  • Asking for user input for a 2d array and storing the data in the array in C [closed]
  • Using Separator In Strings.join GoLang
  • Angular.js - ngModel value is undefined when ng-pattern is set in directive
  • How to parse XML using c#? [closed]
  • How to produce a Code 39 that can be reliably read after faxing
  • How to import Navit into Eclipse and use it in own android project
  • HABTM associations in Rails : collecting and counting the categories of a model's children
  • Attemping to change attributes of $(this) inside success function
  • How to add regEx in angular filter
  • insert a picture into database(sqlite) with java code. what should i do?
  • How to synchronize two scrollview in Android?
  • Not able to display correct data in table -AngularJS
  • Using android opencv apps without downloading opencv sdk manager
  • Google OAuth: can't get refresh token with authorization code
  • Add reference to ASP.NET 5 Class Library from Framework 4.5 Class Library Project
  • Function calls are not supported. Consider replacing the function or lambda with a reference to an e
  • IE11 throwing “SCRIPT1014: invalid character” where all other browsers work
  • nonblocking BIO_do_connect blocked when there is no internet connected
  • Meteor helpers not available in Angular template
  • Get data from AJAX - How to
  • Deleting and Updating values from a cusrsor adapter
  • Bug in WPF DataGrid
  • Modifying destination and filename of gulp-svg-sprite
  • 'TypeError' while using NSGA2 to solve Multi-objective prob. from pyopt-sparse in OpenMDAO
  • Calling of Constructors in a Java
  • Run Powershell script from inside other Powershell script with dynamic redirection to file
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • Proper way to use connect-multiparty with express.js?
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Load html files in TinyMce
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • MATLAB: Piecewise function in curve fitting toolbox using fittype
  • JaxB to read class hierarchy
  • Busy indicator not showing up in wpf window [duplicate]
  • Why is Django giving me: 'first_name' is an invalid keyword argument for this function?
  • Binding checkboxes to object values in AngularJs
  • How can I use `wmic` in a Windows PE script?