How can I give an empty material UI text field a value of null, when submitting the form, instead of an empty string?

[REDLIGHTFILMS]

My problem is that the default value of the text field is zero but when I submit the form the value of the text field is an empty string and I don't want that. I want the value to be zero at the end. How can I implement this?

A part of my JSON:

"basicData": {
 "name": ""
 "partner": ""
 "riskFactor": ""
}

But what i want is this:

"basicData": {
 "name": null
 "partner": null
 "riskFactor": null
}

[bluebill1049]

if your backend needs an empty string to null, do a parser at the submit level. in my opinion, its much easier to, parse and format inline input as I stated in the other question.

[REDLIGHTFILMS]

Do you have an example how to format inline input?

[REDLIGHTFILMS]

But how can I format the input of a MUI text field? Well, I have to put it into a controller but then I get it out:

 <Controller
      control={control}
      name={`contactData.addresses[${index}].address`}
      render={props => (
        <TextField
            style={addressTextFieldStyle}
            label="Adresse"
            variant="outlined"
            name={`contactData.addresses[${index}].address`}
            inputRef={register()}
            type="text"
            onChange={e => {
              const val = e.target.value;
              setValue(val === "" && val === undefined ? props.value = null : val)
            }}
             value={props.value}
           />
       )}
   />

The setValue comes from react-hook-form. I also got the defaultValues set to zero from my form. But I can't get it to print a null instead of an empty string at the end. What am I doing wrong?

[bluebill1049]

you shouldn't use setValue at all in Controller, use props.onChange

[REDLIGHTFILMS]

Well, how else do I get it changed? With me, it's so that props.value is always null.

[bluebill1049]

get from your e, eg: event, props.onChange(e.target.value)

[bluebill1049]

check the doc, it's your best reference.

[REDLIGHTFILMS]

So I did exactly what your documentation says, but it does not help. My object still contains empty strings.

<Controller
       control={control}
       name="contactData.website"
       render={({ onChange, value, onBlur }) => (
        <TextField
          style={TextFieldStyle}
          name="contactData.website"
          label="Webseite"
          variant="outlined"
          onChange={(e) => onChange(e.target.value)}
          value={value}
          inputRef={register({
            pattern: {
              value: /^(http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/)?[a-z0-9]+([-.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$/,
              message:
                'Ungültige Webseitenadresse, geben Sie bitte sowas in der Form ein: www.eclever.io',
            },
         })}
         type="text"
     />
   )}
/>

my object

contactData:
    email: ""
    foundationYear: ""
    telephone: ""
    website: ""

[bluebill1049]

no, you didn't. why you register input inside the controller again?

[REDLIGHTFILMS]

It worked now, but I'm getting this error: value prop on input should not be null. Consider using an empty string to clear the component or undefined for uncontrolled components.

My defaultValues for the form are null. What can I do about this error?

[mskl-kashish]

  <TextField
          {...register("contactData.website")}
          onBlur={() => {}}
          label="Webseite"
          size="small"
        />

    this will work hust give an empty function to onBlur 
     onBlur={() => {}}