Angularjs - inability to invalidate input (object does not support property or method '$ setValidity')
I am trying to do the following
if ($scope.RetypePassword != $scope.resource.Password) {
$scope.resource.Password.$setValidity("missmatch", false);
} else {
$scope.resource.Password.$setValidity("missmatch", true);
}
but the error with this error
TypeError: Object doesn't support property or method '$setValidity'
What is the reason?
resource.Password is a data binding to an input like this
<input type="password" ng-model="resource.Password" name="Password" />
source to share
You should not have a form name resource
, because you have a model that already has an object in resource
, try to distinguish from the name the solution to your problem for example name = "myForm"
Markup
<form name="myForm">
<input type="password" ng-model="resource.Password" name="Password" />
</form>
code
if ($scope.RetypePassword != $scope.resource.Password) {
$scope.myForm.Password.$setValidity("missmatch", false);
} else {
$scope.myForm.Password.$setValidity("missmatch", true);
}
source to share
The point is that resource.RetypePassword
- a scope object (model) is not the same as what ngModelController
you want. This controller is not directly affected. However, you can access it through the parent form
by the name of the input.
So if your HTML looks like this:
<form novalidate name="form">
<div>
<label>Password</label>
<div><input type="password" ng-model="resource.Password" name="Password" /></div>
</div>
<div>
<label>Confirm Password</label>
<div><input type="password" ng-model="resource.RetypePassword" name="RetypePassword" /></div>
</div>
</form>
Then you can do it
if ($scope.resource.RetypePassword != $scope.resource.Password) {
$scope.form.Password.$setValidity("missmatch", false);
} else {
$scope.form.Password.$setValidity("missmatch", true);
}
Check out a small demo of the principle.
source to share