State does not load when integer-type query param has non-numeric value

[cvn]

For a state with this url pattern /?{x:int}, if you try a url like /?x=hello, the state does not load. This applies to both 0.2.18 and 1.0.0-alpha.4. In the 1.0 alpha, it logs an error message, Error: Param values not valid for state 'myState'(…).

demo plunk (1.0.0-alhpa.4): http://plnkr.co/edit/sanCjvjL1LcGRmQXlTRF?p=preview
without the iframe: http://run.plnkr.co/plunks/sanCjvjL1LcGRmQXlTRF/#/?x=hello

The effect is that if someone types in a URL incorrectly, my app just shows a blank white page. Since query parameters are optional, it's funny that a malformed one would completely block rendering. I expected the state to load and the param to be undefined.

Is this intentional? If so, is there a way to handle the error? It isn't caught by the $stateChangeError event.

[eddiemonge]

Where are you adding the event listener for $stateChangeError at?

[cvn]

In a run block immediately after the config block. From the plunk:

.run(function($rootScope) {
  $rootScope.$on('$stateChangeError', console.log.bind(console));
})

[christopherthielen]

As you noticed, the int parameter type validates that a param value is an int, and transitions are checked for validity.

There are a few ways you could address this.

1. Create your own int parameter type, or override the built in one. Have it convert to an int, but fall back to null or whatever you prefer.

2. Catch invalid transitions in 1.0 and redirect with valid parameters.

---

1

  var intType = $urlMatcherFactoryProvider.type('int');

  var customIntType = Object.assign({}, intType, {
    is: () => true,
    pattern: /.*/,
    decode: (str) => {
      let val = parseInt(str, 10); 
      return isNaN(val) ? null : val;
    }
  });

  $urlMatcherFactoryProvider.type('int', customIntType);

http://plnkr.co/edit/XIRbDc487vLLlrdDbsDb?p=preview

2

.run(function ($transitions) {
  $transitions.onBefore({}, function ($state, $transition$) {
    if (!$transition$.valid()) {
      var params = $transition$.params();
      if (isNaN(params.x))
        params.x = null;
      return $state.target($transition$.to(), params, $transition$.options())
    }
  });
});

http://plnkr.co/edit/RL3DbfYzIbCKE7UAQwaL?p=preview

---

However, maybe it would be better to use the default value, if it exists, instead of blocking the transition.

It might be nice if something like this worked:

  .state('myState', {
    url: '/?{x:int}',
    params: { x: null },

I will consider this in the future

[cvn]

Thank you, Chris. That was invaluable. I'm going to use a custom int type. This will keep my urls lenient and is minimally-invasive. The default value handling you've proposed is interesting, but wouldn't be the right fit for my situation.

[christopherthielen]

Closing as low priority. If this feature request comes up again we can reopen it.

[daddydrac]

Was this ever implemented? I built a scrolling feature that changes ID as you scroll down the page, it chamhes the URL. I get this error: "Transition Rejection($id: 4 type: 6, message: The transition errored, detail: Error: Param values not valid for state 'pricing.estimate')"