I managed to get this right it was just a matter of chaining the correct
classes together in the css, the classes I used were ng-touched and
ng-valid / ng-invalid
On Thursday, December 24, 2015 at 12:01:33 PM UTC+2, ShatterStar wrote:
>
> Hi Guys,
>
> I have a form as a view with two simple inputs, I have applied the classes
> ng.invalid and ng-pristine in the css however what I want to achieve is
> upon the loading / viewing of the form the input fields should have no
> default styles applied, only after the user has interacted with the form
> and then if the inputs are valid or invalid the relevant classes should be
> applied - please assist, here's my code
>
> <style type="text/css">
> form input { padding: 10px; }
> form .ng-pristine { border:none; }
> form .ng-invalid { border: 1px solid red; }
> form .ng-valid { border: 1px solid lightgreen; }
> </style>
>
> <p>
> <label for="expenseDetail">Enter expense details</label>
> <input type="text" name="expenseDetail" ng-model="newExpense.detail"
> required placeholder="Expense details"
> ng-class="expenseDetail.$pristine ? 'ng-pristine' : 'ng-invalid'">
> </p>
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
