CODEWITHSUNDEEP
htmlangularjsforms
TheLearner
TheLearner

Reputation: 2863

Form showing ng-pristine even when filled with a value

Please look at the following screenshot:

enter image description here

And here's the corresponding markup:

HTML:

<div class="container-fluid" ng-controller="dictController">
    <div class="row row-padding">
        <form class="form-horizontal" role="form" name="lookup-form" id="lookup-form">
            <div class="input-group col-md-6">
                <input  id="word" type="text" placeholder="Enter a Spanish or English word here..." class="form-control input-lg lookup-field lookup-field-single" onMouseOver="$(this).focus();" required>
                <i class="fa fa-times fa-lg delete-icon" onfocus="clearword();" onclick="clearword();" data-toggle="tooltip" data-placement="top" title="Click to clear entered text"></i>
              <i class="fa fa-keyboard-o fa-2x kb-icon" onfocus="toggler('virtualkeypad', this);" onclick="toggler('virtualkeypad', this);" data-toggle="tooltip" data-placement="top" title="Click to enter accented characters"></i>
                <div class="input-group-btn">
                    <button class="btn btn-lg btn-primary lookup-submit" type="submit" id="lookup" onclick="$('#word').blur(); lookup_check($('#word').val()); return(false);">Lookup</button>
                </div>
            </div>
            <div id="virtualkeypad" class="btn-group vkb-hide"><!--col-md-offset-4-->
              <button class="btn btn-lg first-btn" type="button" onClick="spl_character('á');">á</button>
              <button class="btn btn-lg" type="button" onClick="spl_character('é');">é</button>
              <button class="btn btn-lg" type="button" onClick="spl_character('í');">í</button>
              <button class="btn btn-lg" type="button" onClick="spl_character('ó');">ó</button>
              <button class="btn btn-lg" type="button" onClick="spl_character('ú');">ú</button>
              <button class="btn btn-lg" type="button" onClick="spl_character('ü');">ü</button>
              <button class="btn btn-lg last-btn" type="button" onClick="spl_character('ñ');">ñ</button>
            </div>
        </form>
</div>

The code is working perfectly fine and I have no issues with any aspect thereof. However, I notice that the form in question has been tagged by the Angular class ng-pristine even when the input box has a value (book). Shouldn't it be ng-dirty instead? Also, the input box itself doesn't seem to have any Angular tag whatsoever on it. I am just curious as to what could be causing this.

Upvotes: 0

Views: 224

Answers (1)

julian soro
julian soro

Reputation: 5228

The magic of Angular is that it automatically binds your DOM elements to variables in your data model. In this case, if you add a ng-model binding to a variable in your your $scope, this should work as your expect.

This is how angular "knows" that your form is dirty or pristine.

Upvotes: 1

Related Questions