Databases
StackOverflow2013
Postsdbo
POAngularJS form item validation properties before <form> tag
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAngularJS form item validation properties before <form> tag
    text
    copied!<p>Is this normal behaviour in AngularJS? ng-class expression related with FORM and referenced before FORM (or INPUT) tag is calculated correctly only if validation status for that form element is changed (try to type in valid email in fiddle). Three identical H2-s showing different expression calculations before tags, and correct values after email input edit (note that {{TestForm.Email.$valid}} is showing correct value in both cases):</p> <p>JSFiddle: <a href="http://jsfiddle.net/nEzpS/26/" rel="nofollow">http://jsfiddle.net/nEzpS/26/</a></p> <pre><code>HTML: &lt;div ng-controller="TestController"&gt; &lt;h2 class="someInitialClass" ng-class="TestForm.Email.$valid &amp;&amp; 'classOK' || 'classError'"&gt;Email field validation result is &lt;b&gt;{{TestForm.Email.$valid}}&lt;/b&gt;&lt;/h1&gt; &lt;form name="TestForm" ng-submit="formSubmit()"&gt; &lt;input type="email" class="input-xlarge" maxlength="100" name="Email" ng-model="Client.Email" ng-required="true" ng-maxlength="100" &gt; &lt;/form&gt; &lt;h2 class="someInitialClass" ng-class="TestForm.Email.$valid &amp;&amp; 'classOK' || 'classError'"&gt;Email field validation result is &lt;b&gt;{{TestForm.Email.$valid}}&lt;/b&gt;&lt;/h1&gt; &lt;br/&gt;&lt;br/&gt; &lt;ul ng-repeat="FormItem in TestForm"&gt; &lt;li&gt;{{$index}} {{FormItem.$error}} &lt;/li&gt; &lt;/ul&gt; &lt;br/&gt;&lt;br/&gt; &lt;/div&gt; JS: function TestController($scope) { }​ ​ CSS: .someInitialClass { font-family: Helvetica; } .classError { color:red; } .classOK { color: green; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload