Tidbits | Nov. 15, 2022

Pro-Tip – Nullable DRF FloatFields and Javascript

by Frank Wiles |   More posts by Frank

I run into this situation every couple of years, and I always forget the solution. Even asked around the office and everyone had the same "Oh yeah, I remember doing that once... but now how".

When these situations happen to us, it is often time to write a blog post!

The situation I was faced with was I had:

  • A model with a few nullable Django Model FloatFields
  • Django Rest Framework, using a ModelSerializer
  • react-hook-form, react-query and standard fetch calls to POST the data to the endpoint

The issue is that we have a simple HTML text input to collect a possible float value. It's easy enough to mark this as not required on the form and any client-side form validation. However, it is NOT always that easy to handle what happens next. Because it's a text field, the JS tooling wants to send it as an empty string. So we end up with a payload that looks like:

{
  "name": "Frank Wiles",
  "weight": "",
}

When what we'd really like to have is:

{
  "name": "Frank Wiles",
  "weight": null,
}

DRF rejects this saying that an empty string is not a number. It is correct of course, just not being super helpful in this exact situation. So what is the solution? Enter BlankableFloatField

from rest_framework.serializers import FloatField


class BlankableFloatField(FloatField):
    """
    This accepts an empty string as None
    """

    def to_internal_value(self, data):
        if data == "":
            return None
        return super().to_internal_value(data)

You can override this on your ModelSerializer by just specifying the fields manually like this:

class PersonSerializer(serializers.ModelSerializer):
    # ... your other fields here ... 
    weight = BlankableFloatField(required=False, allow_null=True, default=None)

The solution isn't hard to execute, but it's hard to reason about and figure out the best place to adjust this in your Django project.

Hopefully, the next time you find yourself with Javascript error in your console saying that an empty string is not a number this helps you out!


drf   javascript  

Sometimes you want your FloatFields to be nullable, but your JS code isn't quite smart enough to handle it.{% else %}

2022-11-15T15:43:00 2022-11-15T15:58:34.610249 2022 drf,javascript