Aspnetcore: Cannot bind to nullable types (bool?, int?, etc)

[vertonghenb]

A lot of work has been done for the bind method, let's add the one for nullable bool. bool?

Current error:
Uncaught (in promise) Error: System.ArgumentException: 'bind' does not accept values of type System.Nullable`1[[System.Boolean, mscorlib, Version=2.0.5.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]. To read and write this value type, wrap it in a property of type string with suitable getters and setters.

[vertonghenb]

Will do a PR for this tomorrow

[SteveSandersonMS]

What would it mean though? How would the UI state ever be “null”?

[vertonghenb]

A nullable bool should show nothing, but it is usefull when you want to bind the value, like we're doing here If the checkbox is interacted with, it should be true or false but initially it should be nothing.

<p>
    Initially null checkbox:
    <input id="checkbox-initially-null" bind="checkboxInitialltyNullValue" type="checkbox" />
    <span id="checkbox-initially-null-value">@checkboxInitialltyNullValue</span>
</p>

@functions{
    bool? checkboxInitialltyNullValue = null;
}

[Andrzej-W]

Three-state checkbox demo:
https://demos.devexpress.com/aspnetcore-bootstrap/Editors-CheckBox#GrayedState
I believe we can create a similar Blazor component quite easily.

Here is the doc from Mozilla:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#Indeterminate_state_checkboxes

and some discussion from Vue:
https://github.com/vuejs/vue/issues/4094

I have mixed feelings whether example code shown by @vertonghenb should work or not. Personally I prefer a real three-state checkbox component - it is much more user friendly.

[vertonghenb]

@Andrzej-W
What I'm showing is a three state checkbox, which works if we add a little bit of code in the BindMethod.cs

1. True,
2. False,
3. null

However, we're not really talking about the looks here rather the underlying coupling of the bind method

[Andrzej-W]

@vertonghenb Unfortunately I know almost nothing about Blazor internals yet, but I think it is not as simple as you wrote. Three-state checkbox should be able to map variable/property values to two HTML element properties:

| variable value | checked | indeterminate |
| --- | --- | ---|
| null | any | true |
| false | false | false |
| true | true | false|

Can you achieve this effect by modifying only this one file (BindMethods.cs)?

[Andrzej-W]

I have just checked and nullable numeric types (int, decimal, etc.) are not supported either. For these types fix should be simpler. Null value can be interpreted as empty field.

[vertonghenb]

So, will we allow nullables? If so i'll see if I can implement the others as well in #1012

1. int?
2. long?
3. bool?
4. float?
5. double?
6. decimal?

[Andrzej-W]

In my opinion it is a must have feature. Hopefully @SteveSandersonMS will agree.

[simonziegler]

Agree that this is a must have. I ended up creating a component for numeric input that handles nulls. When focus is gained, the field shows a raw number. In losing focus, the relevant number (checked with a regular expression) is written back in formatted form with commas and so on. If the field is empty on losing focus, the component interprets this as a null for a double? Datatype. Works reasonably well.

[faina09]

Version 0.6.0 seems still not supporting nullables (neither bool? nor the other 6 types listed by @vertonghenb) but this is a very important feature when using db!
@simonziegler can you please share your component for numeric inputs? I think we should work to insert nullables in Blazor!

[akorchev]

Supporting DateTime? is also needed for <input type="date"> and <input type="datetime-local">

[akorchev]

@SteveSandersonMS

What would it mean though? How would the UI state ever be “null”?

The UI state is "empty" - the initial state. For example when you bind an <input type="number"> to int? which is currently null the input should stay empty.

I believe both React and Angular behave in a similar way.

[s-haralampiev]

Hi, what is the state of this issue? Are nullable types supported already in some way? I cannot bind to a nullable type yet (The example above works when binding to a bool? but I am unable to bind to a DateTime?) and I am receiving the same error as stated above.

[julienGrd]

Hi, same behavior here (to bind a datetime? to an input type=date) , there is a "clean" workaround ?

[mkArtakMSFT]

Thanks for contacting us.
We think that this issue is fixed now. If you are still facing this problem, please file a new issue.