Can't set form control to null using setValue update function

[chrissena]

version 3.0.3

Thanks for creating such a great library!

I am having trouble setting the value of a formControl to null.

According to the docs:

... Controls directly support values of type string, number, boolean, null, and undefined. For object and array values you have to use value boxing.

however when attempting to set the value of a control to null using the setValue update function i.e. setValue(null) the following error occurs.

TypeError: Cannot read property 'hasOwnProperty' of null  
    at isFormState (forms.es5.js:463)
    at setValue (forms.es5.js:2924)

when looking through the code it seems that this caused by

export function isFormState<TValue = any>(state: any): state is FormState<TValue> {
    return state.hasOwnProperty('id') && state.hasOwnProperty('value') && state.hasOwnProperty('errors');
}

should there not be a null check on state or is there a better way of setting the value to null that I am unaware of?

[MrWolfZ]

The line you mention should not be the bug since the state itself should never be null, just its value may be null. So the bug might be in the implementation of setValue. Could you please try the uncurried version, i.e. setValue(state, null).

[chrissena]

Yes, I can use the uncurried version.

As I am using setValue as part of an updateGroup function I suppose i could write it like
(state => setValue(state, v))

This would just be me currying the function myself (which is the workaround I am currently using) to avoid the error being thrown in the isFormState function. (isFormState would now only be called with the actual state.)

...since the state itself should never be null, just its value may be null.

I thought the whole point of the isFormState function was to check whether the first parameter in setValue is a value or formState (because it is overloaded). i.e. to determine whether the function is being called as curried or uncurried. This means whilst checking there is still a possibility that it could be null (a valid formValue but invalid formState)

This is why I suggested checking for null like...

export function isFormState<TValue = any>(stateOrValue: any): stateOrValue is FormState<TValue> {
    return stateOrValue && stateOrValue.hasOwnProperty('id') && stateOrValue.hasOwnProperty('value') && stateOrValue.hasOwnProperty('errors');
}

[MrWolfZ]

Ah yes, sorry, you are right. I didn't read your post carefully enough. Your proposed fix should work. I'll create a test and a fix for this today after work. Thanks for reporting this bug.

[chrissena]

no worries, easily done. Thanks for the prompt reply!

[MrWolfZ]

I've just released version 3.0.4 which contains a fix for this bug.