ng-model not reflecting invalid state however input is applying class correctly.

[zackarychapple]

I have the following input with validation. I cannot get the formError to show up when the input is in an invalid state. The class is being applied to the input however not to the model.

<div class="form-group" ng-class="{'has-error': myObj.ssn.$invalid}">
    <label for="ssn" class="field-label">SSN:</label>
     <div class="field-value">
        <input type="text" name="ssn" id="ssn" class="form-control" ng-model="myObj.ssn" ng-pattern='/^\d{3}-?\d{2}-?\d{4}$/'>
        <div class="formError" ng-show="myObj.ssn.$invalid">Please enter a valid ssn.</div>
    </div>
</div>

HTML after editing the text in the input to be invalid.

<div class="form-group" ng-class="{'has-error': myObj.ssn.$invalid}">
    <label for="ssn" class="field-label">SSN:</label>
    <div class="field-value">
        <input type="text" name="ssn" id="ssn" class="form-control ng-untouched ng-dirty ng-invalid ng-invalid-pattern" ng-model="myObj.ssn" ng-pattern="/^\d{3}-?\d{2}-?\d{4}$/">
        <div class="formError ng-hide" ng-show="myObj.ssn.$invalid">Please enter a valid ssn.</div>
    </div>
</div>

[petebacondarwin]

You need to wrap you inputs in an <form> element, which has a name attribute. For example:

<form name="myForm">
  <input ng-model="myObj.ssn" name="ssn">
</form>

You can now access the validity of the input via myForm.ssn.$invalid etc.

Please read https://docs.angularjs.org/guide/forms

[zackarychapple]

That does not resolve the issue. Adding or removing any character from the input induces an invalid state, which blanks out the ssn value on the object, however it does not induce the invalid state on the form.

http://plnkr.co/edit/aE5jzjy4XeVsIYlICEr5?p=preview

[caitp]

@zackarychapple something like this? http://plnkr.co/edit/z7zcmanVev0rDwirB00K?p=preview

[zackarychapple]

@caitp that works, but I cannot see any differences. What did you change?

[caitp]

Gave the form a name, as @petebacondarwin suggested. This makes the form accessible in scope, which gives you access to the ngModel controller for the named form control, which gives you access to the map of $error properties for that specific form control, so you can see that they are being reflected

[zackarychapple]

Fair enough, I wonder if the example can be updated to reflect this?

[caitp]

Which example? all of the form control examples that I see are already demonstrating this