When trying to access a form field's $valid property from inside the controller, I get "cannot access $valid of undefined." Here's what I've tried, based on other answers on SO, to no avail:
- Use controllerAs - I was already using controllerAs in my route but for good measure I added an ng-controller="TestCtrl as testCtrl" to my container DIV.
- Try ng-init, passing the scope - I added an ng-init to the form tag (ng-init=testFunction(this) that calls a controller function to set a property on the scope called formScope (as seen here: AngularJs can't access form object in controller ($scope))
- Try scope = {} in your controller
- Several other suggestions that I fail to remember right now.
My requirements are, to me, simple: When the field loads (controller loads the model data), we need to:
- Show the appropriate validation glyphicon next to the field.
- When the field's validity changes, the glyphicon needs to change accordingly
- Icons:
when $valid = false, use glyphicon-remove
when $valid = true, use glyphicon-ok
when $valid = null or undefined (possible?), use glyphicon-warning-sign - Be able to pass the validity to a directive (future use)
See the following plunk: https://embed.plnkr.co/XXFM6Mtt1KnSci5yagTd/
Any help or different approaches is appreciated. This is kicking my butt. Thanks