javascript - Angular1: How to reflect ng-model errors on another element? -
i have directive following template
<div> <span class="label">my label</span> <input ng-model="name" required> </div>
i want label painted red when input field invalid.
how can that?
currently have directive sync errors ngmodelctrl wrapping div
<div add-all-errors> ... </div>
and directive's link function this:
const ngmodel = $element.find('[ng-model]').controller('ngmodel'); $scope.$watch(()=>ngmodel.$error, addallclasses, true);
where addallclasses
makes sure correct classes appear on element..
i tried adding same ng-model
<div ng-model="name"> ... </div>
but did not see classes there..
any better way this?
this why use angularjs form... i'm not sure why people against using handy feature.
i've made plunker you. https://plnkr.co/edit/bgocqjwzlrq2atyzuynm?p=preview
<form name="form"> <span ng-class="{red: form.name.$invalid}">name:</span> <input name="name" ng-model="name" required> </form>
a little more insight of what's going on. form
added scope auto magically angularjs it's name. in case, named form
, can name.
now form
ngform object , adds input field name attributes. way can form.name
object similar ngform object. can use $invalid
or $valid
properties ng-class.
ngform pretty powerful , loaded many cool properties , methods. call console.log(scope.form);
need put in method , add ng-change see updates.
Comments
Post a Comment