Reseting input fails

[elincognito]

I have the following html
<input id="passwordConfirm" name="passwordConfirm" type="password" data-ng-model="user.confirmPassword" data-match="user.password" placeholder="{{'password'|i18n}}" class="form-control input-md" required>

in the controller i want to reset the value of the field so
i tried

$scope.user.confirmPassword = ''
and
$scope.user.password = ''
Nothing happens however the expected result would be to the input be cleared

When i remove the data-match directive everything works as expected

[TheSharpieOne]

Yeah, so it appears that based on everything else that is going on in this directive that when the internal $modelValue is falsey it will not update the view.

Work-around, hopefully a temporary work-around (i'll see what I can do to fix this when I have time) is to manually set the view value using formName.fieldName.$setViewValue("") and then rendering it with formName.fieldName.$render()

$scope.user.confirmPassword = "";
form.confirmPassword.$setViewValue("");
form.confirmPassword.$render();

Also, which version of angular are you running and which version of this script are you running? I think this probably only exists in the 1.2.x branch, the 1.3.x branch shouldn't suffer this problem.

[elincognito]

im using 1.2.28

[ragefuljoe]

I'm using 1.4.1 and running into the same problem. Blanking out both fields still shows error.

[TheSharpieOne]

But what version of angular?

[ragefuljoe]

angular 1.3.15

[romelgomez]

Hi friends, this is not a bug,

I have written this example to prove it:

https://jsfiddle.net/venezuela/wqrxfbrz/

In summary:

var original = angular.copy($scope.model = {
  'email':'',
  'password':''
});

$scope.resetForm = function(){
  angular.copy(original,$scope.model);
  $scope.formName.$setUntouched();
  $scope.formName.$setPristine();
};

Plus: if you have a array $scope.files = [], the angular way to reset a array is using $filter or angular.copy:

$scope.removeInvalidFiles = function(){
  $scope.model.files = $filter('filter')($scope.model.files, function(value) { return !angular.isDefined(value.$error);});
};

Other example: https://jsfiddle.net/venezuela/atpaz7w7/

Also see this stackoverflow questions:
http://stackoverflow.com/questions/13085024/reset-a-model-with-angular-js?lq=1
http://stackoverflow.com/questions/17559258/angularjs-reset-scope-data-to-original-values?lq=1

[ticklemepierce]

Hey, just chiming in to let everyone know that I figured out the issue.

<input id="passwordConfirm" name="passwordConfirm" type="password" data-ng-model="user.confirmPassword" data-match="user.password" placeholder="{{'password'|i18n}}" class="form-control input-md" required>

This is comparing against user.password. When you go to an empty field in the password field, user.password = undefined. This is comparing against the Confirm Field string. undefined === "" is false.

I just changed mine to compare against the Password Form field instead of the data in scope and then it is comparing an empty string to empty string and then (since "" === "" is true) the error doesn't show in this case.

Hope this helps some people!