for now the type = "number" in TextFiled Material-UI accept number(0-9) coma (,) and double dash(--)

and, I just need one dash(-)

I've seen to insert pattern in inputProps, but it seems not working..

Any help is greatly appreciated

Thank you

 <TextField
    label="Super Koin"
    variant="outlined"
    type="number"
    inputProps={{
       pattern: /^-?\d (?:\.\d )?$/g
      }}
    name="Gajian"
    style={{ marginBottom: "22px" }}
    defaultValue={
        (form.injectCustomer && form.injectCustomer.supercoin) ||
            0
         }
     fullWidth
     inputRef={this.superPoints}
     InputLabelProps={{
         shrink: true
      }}
     onChange={e => {
                      
     this.actionRow(
     { key: "supercoin", value: (e.target.value)},
            "supercoin"
         );
       }}
     />

I'm trying to make validation inside onChange

 onChange={e => {
    console.log(e.target.value,"EEE")
    this.actionRow({ 
      key: "supercoin", 
      value: e.target.value === "--" ? e.target.value = 0 : e.target.value = 
     },
      "supercoin"
    );
                       
}}

but, the console.log for "-" and "--" is empty and it seems impossible to validate from onChange

CodePudding user response：

I think when using patterns you have to use the type="text".

Then add the inputMode: 'numeric' in your inputProps.

<TextField 
    type="text" 
    inputProps={{ 
           inputMode: 'numeric', 
           pattern: '/^-?\d (?:\.\d )?$/g'
    }} 
/>

CodePudding user response：

You could use

CodePudding user response：

import * as React from 'react';
import NumberInput from 'material-ui-number-input';
import bind from 'bind-decorator';

class Demo extends React.Component {
    setValue(value) {
        this.setState({ value: value });
    }

    @bind
    onChange(event, value) {
        this.setValue(value);
    }

    @bind
    onValid(valid) {
        this.setState({ valid: valid });
    }

    @bind
    one rror(error) {
        this.setState({ errorText: error !== 'none' ? 'Error: '   error : '' });
    }

    constructor(props) {
        super(props);
        this.state = { value: '', valid: 0, errorText: '' };
    }

    render() {
        const { value, valid, errorText } = this.state;
        return (
            <div>
                <NumberInput
                    floatingLabelText="NumberInput"
                    value={value}
                    onChange={this.onChange}
                    onValid={this.onValid}
                    errorText={errorText}
                    one rror={this.onError}
                    strategy="allow"
                    required
                />
                <NumberInput value={String(valid)} floatingLabelText="Valid number" />
            </div>
        );
    }
}