ng-required="true" does not allow to empty field when using ng-model-options="{ getterSetter: true }"

[mmazo]

When using both ng-required="true" and ng-model-options="{ getterSetter: true }",
there is no possibility to empty the field. You always get the last character 'standing' in the input field.
This happens because 'newName' value in getter-setter function for name is undefined when value is empty. It happens only when using ng-required="true". If the field is not required, we get just empty string and everyrhing works fine.

Here is the code example:

<input type="text" name="userName"
           ng-required="true"
           ng-model="user.name"
           ng-model-options="{ getterSetter: true }" />

(function(angular) {
  'use strict';
angular.module('getterSetterExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    var _name = '';
    $scope.user = {
      name: function(newName) {
        console.log(newName);
        if (angular.isDefined(newName)) {
          _name = newName;
        }
        return _name;
      }
    };
  }]);
})(window.angular);

[Narretz]

Can you please put the code as a runnable example on a plnkr.co or similar?

[mmazo]

Hi Narretz,

here is the example: http://plnkr.co/edit/P5NaLBwWYB2v8O9U0W0A?p=preview

[andrewaustin]

@mmazo You need to turn off validation by passing allowInvalid: true to your ng-model-options. You can see a working plnkr here: http://plnkr.co/edit/6vuK2vAb9m24eRL5uQ0Q?p=preview

You can see a more details from ngConf here: https://www.youtube.com/watch?v=k3t3ov6xHDw&t=211

[gkalpak]

Using allowInvalid will work around the issue, but it is not solving the actual problem.
The actual problem lies in the implementation of name(), which treats passing an argument with value undefined as passing no argument at all (although these are obviously two very distinct cases).

You should use a more "accurate" way of defining whether the function is called as a getter or as a setter (i.e. whether newName has been passed (even if undefined) or not).
E.g.:

name: function(newName) {
  if (arguments.length) {
    _name = newName || '';
  }
  return _name;
}

Demo

I think everything works as expected, so there's nothing actionable here.

[Narretz]

Thanks @gkalpak, I agree, this is not a bug.

[mmazo]

Thanks @gkalpak, the solution is really good. You are right, @Narretz, this is not a bug.