Number or "empty string" type | TypeScript Community | Page 1

west moat Oct 10, 2023, 8:25 PM

#

I'm sure this has been addressed many times before, but my googling is failing me. I have a variable of type number that is assigned to an input field in my app. I have to assign '0' to that variable because it is a number, but I do not want '0' to get auto-filled into the input field. How do I get around this issue? This is using React.

echo walrus Oct 10, 2023, 8:50 PM

#

with plain HTML input fields? using React? Angular forms?

#

sounds like your questions is missing an important part

#

also, not really a TS question, more about the controls you are using getting a default value depending on what types they are

west moat Oct 10, 2023, 9:53 PM

#

Sorry, this is React

#

well, I though I could do something like input: number | ''

echo walrus Oct 10, 2023, 9:55 PM

#

that's only about the types

#

it does not impact runtime

#

if you want your input to have a default value, you should give one to it

west moat Oct 10, 2023, 9:55 PM

#

but I don't

echo walrus Oct 10, 2023, 9:55 PM

#

iirc html inputs have a default attribute

west moat Oct 10, 2023, 9:55 PM

#

I want a blank input

#

but it has to be 0

echo walrus Oct 10, 2023, 9:56 PM

#

with numbers? don't think that's possible

#

huh?

#

blank or 0?

west moat Oct 10, 2023, 9:56 PM

#

blank

#

but Typescript forces me to input a zero as the default value

echo walrus Oct 10, 2023, 9:56 PM

#

right

#

if it's a number input

#

it must have a number

west moat Oct 10, 2023, 9:56 PM

#

const emptyRule: Rule = {
    id: 'rule-0',
    title: 'Static Rule #1',
    comparison: '',
    blendContains: '',
    containsAmount: 0,
    addExclude: '',
    amount: 0,
    addExIngredient: ''
};

echo walrus Oct 10, 2023, 9:56 PM

#

if you want blank, use a text input

west moat Oct 10, 2023, 9:57 PM

#

ok, I will have to go that route

#

thank you

#

well, i am using a text input

#

but it is ttied to the 'amount' which has to be set to 0 initially

echo walrus Oct 10, 2023, 9:58 PM

#

oh, but that's not on the html

#

it's your own types/props

west moat Oct 10, 2023, 9:59 PM

#

export type Rule = {
    id: string;
    type: string;
    title: string;
    comparison: string;
    blendContains: string;
    containsAmount: number;
    addExclude: string;
    amount: number;
    addExIngredient: string;
};

echo walrus Oct 10, 2023, 9:59 PM

#

you could maybe share the code so we can have a closer look at it

#

not just the props, but the component with the jsx

west moat Oct 10, 2023, 10:00 PM

#

<input
                    type={'text'}
                    name={'new-rule-amount'}
                    id={'new-rule-amount'}
                    className={'form-control'}
                    placeholder={'e.g. 25'}
                    value={newRule.amount}
                    onChange={handleInputChange}
/>

echo walrus Oct 10, 2023, 10:03 PM

#

well, just use a number | undefined for your value

#

if it's underfined, then it will display nothing in the input box (blank)

#

and if it's a number, it will display it

#

when the user submits the form, or does something, just check the value isn't undefined to see if the user actually inputed any data

#

also you could be using a pattern on your input to only allow numbers

clear stumpBOT Oct 10, 2023, 10:06 PM

#

ascor8522#0

Playground Link

Preview:```ts
import React from "react"

export type RuleProps = {
id: string
type: string
title: string
comparison: string
blendContains: string
containsAmount: number
addExclude: string
amount: number
addExIngredient: strin
...```

#Number or "empty string" type