Input number with required validation is broken on chrome

[rwtnb]

When you have a input[number] with required validation, number validation stops working correctly.

If the field in pristine mode and you start typing letters instead of numbers things get weird and validity.badInput and validity.valueMissing are set as true at the same time, $error.required is set as true and $error.number set as false.

Reproduction: http://plnkr.co/edit/nGjpNLyT2RJ3URbT9Apg
Tested in Chrome Version 33.0.1750.152

[caitp]

I'm not sure this issue is a particularly big deal, it keeps things simpler to avoid updating validity when valueMissing is true. But if anyone wants to write a patch for this, I'm happy to review it.

[tbosch]

This is very close to #6304

[rwtnb]

As workaround for people like me with tight deadlines, I've managed to get this validations to work with a few changes.

// Changes in Html5Validators

function isInvalidState(validity) {
    return validity.badInput || validity.customError || validity.typeMismatch;
}

function addNativeHtml5Validators(ctrl, validatorName, element) {
  var validity = element.prop('validity');
  if (isObject(validity)) {
    var validator = function(value) {
      // Don't overwrite previous validation, don't consider valueMissing to apply (ng-required can
      // perform the required validation)
      if (!ctrl.$error[validatorName] && isInvalidState(validity)) {
        ctrl.$setValidity(validatorName, false);
        return;
      }
      return value;
    };
    ctrl.$parsers.push(validator);
    ctrl.$formatters.push(validator);
  }
}

and the requiredDirective..

var requiredDirective = function() {
  return {
    require: '?ngModel',
    link: function(scope, elm, attr, ctrl) {
      if (!ctrl) return;
      attr.required = true; // force truthy in case we are on non input element
      var validity = elm.prop('validity');

      var validator = function(value) {
        if ((attr.required && ctrl.$isEmpty(value)) && !isInvalidState(validity)) {
          ctrl.$setValidity('required', false);
          return;
        } else {
          ctrl.$setValidity('required', true);
          return value;
        }
      };

      ctrl.$formatters.push(validator);
      ctrl.$parsers.unshift(validator);

      attr.$observe('required', function() {
        validator(ctrl.$viewValue);
      });
    }
  };
};

Edit: forgot this

// Listener from textInputType
var listener = function() {
    if (composing) return;
    var value = element.val();
    var validity = element.prop('validity');

    // By default we will trim the value
    // If the attribute ng-trim exists we will avoid trimming
    // e.g. <input ng-model="foo" ng-trim="false">
    if (toBoolean(attr.ngTrim || 'T')) {
      value = trim(value);
    }

        // Force validations to run again if is in Invalid State
    if (ctrl.$viewValue !== value || isInvalidState(validity)) {
      if (scope.$$phase) {
        ctrl.$setViewValue(value);
      } else {
        scope.$apply(function() {
          ctrl.$setViewValue(value);
        });
      }
    }
  };

Here is the working test http://plnkr.co/edit/MELexufCFKrmn4gpfvus

[caitp]

That particular change will be broken in other ways. Anyways, I don't see this as much of a user pain, but if you want to send a pull request to fix this (which would require the textInputType to be aware of the validity errors that we care about, as well), then by all means, send it