React Hook using Controller for a custom Input

Question

I'm using react-hook-form to valid fields before submitting my form. However, I'm trying to change one input to be react-number-format, but it is not using the same input style and it's not working for the register error validation.

import React, { useState } from 'react';
import { Controller, useForm } from "react-hook-form";
import {
    Form,
    Label,
    Input,
    Button
} from 'reactstrap';
import { FormGroup } from '@material-ui/core';
import moment from 'moment';
import DatePicker from "reactstrap-date-picker";
import NumberFormat from 'react-number-format';

const setErrorStyle = (name) => {
    return { 
        borderColor: name ? 'red' : '', 
        boxShadow: name ? '0 0 1.5px 1px red' : '' 
    }
}

const Test = () => {
    const [ addBill, setAddBill ] = useState({
        debitAmt: '',
        invoiceNumber: '',
        memo: '',
        invoiceDate: moment().format('YYYY-MM-DD'),
    });
    
    const { register, handleSubmit, errors, control } = useForm();

    const submitAddBill = (data) => {
        console.log(data);
    }

    return (
        <>
            <Form onSubmit={handleSubmit(submitAddBill)}>
                <div className="row">
                    <div className="col-sm-2">
                        <FormGroup className="mr-10 mb-10">
                            <Label for="debitAmt" className="mr-sm-10">Debit Amt</Label>
                            <Controller
                                as={
                                    <NumberFormat
                                        thousandSeparator={true}
                                        prefix={"$"}
                                        onValueChange={(v) => {
                                            setAddBill({...addBill, debitAmt: v.floatValue === undefined ? '' : v.floatValue})
                                        }}
                                    />
                                }
                                name="debitAmt"
                                id="debitAmt"
                                variant="outlined"
                                defaultValue={addBill.debitAmt}
                                innerRef={register({ required: true })} aria-invalid={errors.debitAmt ? "true" : "false"}
                                control={control}
                                style={setErrorStyle(errors.debitAmt)}
                            />
                            {errors.debitAmt && (
                                <span style={{ color: "red" }} role="alert">required</span>
                            )}
                        </FormGroup>
                    </div>
                    <div className="col-sm-2">
                        <FormGroup className="mr-10 mb-10">
                            <Label for="invoiceDate" className="mr-sm-10">Invoice Date</Label>
                            <DatePicker name="invoiceDate" id="invoiceDate"
                                value={addBill.invoiceDate} onChange={(e) => setAddBill({...addBill, invoiceDate: e ? moment(e).format('YYYY-MM-DD') : ''})}
                                innerRef={register({ required: true })} aria-invalid={errors.invoiceDate ? "true" : "false"}
                                style={setErrorStyle(errors.invoiceDate)}
                            />
                            {errors.invoiceDate && (
                                <span style={{ color: "red" }} role="alert">required</span>
                            )}
                        </FormGroup>
                    </div>
                    <div className="col-sm-3">
                        <FormGroup className="mr-10 mb-10">
                            <Label for="invoiceNumber" className="mr-sm-10">Invoice Number</Label>
                            <Input type="text" name="invoiceNumber" id="invoiceNumber" placeholder="1234567" 
                                innerRef={register({ required: true })} aria-invalid={errors.invoiceNumber ? "true" : "false"}
                                value={addBill.invoiceNumber} onChange={(e) => setAddBill({...addBill, invoiceNumber: e.target.value})}
                                style={setErrorStyle(errors.invoiceNumber)}
                            />
                            {errors.invoiceNumber && (
                                <span style={{ color: "red" }} role="alert">required</span>
                            )}
                        </FormGroup>
                    </div>
                    <div className="col-sm-3">
                        <FormGroup className="mr-10 mb-10">
                            <Label for="memo" className="mr-sm-10">Memo</Label>
                            <Input type="text" name="memo" id="memo" placeholder="Memo" 
                                innerRef={register()} aria-invalid={errors.memo ? "true" : "false"}
                                value={addBill.memo} onChange={(e) => setAddBill({...addBill, memo: e.target.value})}
                                style={setErrorStyle(errors.memo)}
                            />
                        </FormGroup>
                    </div>
                </div>
                <Button type="submit" color="primary" size="sm" className="w-auto">Add Bill</Button>
            </Form>
        </>
    )
}

export default Test;

Also, when I submit the form and check the log, the debitAmt data is not there.

Thanks

Can you create a codesandbox and share it over here

Sumanth Madishetty
– Sumanth Madishetty

2021-04-19 15:58:17 +00:00
Commented Apr 19, 2021 at 15:58 — Sumanth Madishetty
– Sumanth Madishetty, Commented Apr 19, 2021 at 15:58
codesandbox.io/s/vigorous-paper-qjkis?file=/src/App.js

myTest532 myTest532
– myTest532 myTest532

2021-04-19 16:02:15 +00:00
Commented Apr 19, 2021 at 16:02 — myTest532 myTest532
– myTest532 myTest532, Commented Apr 19, 2021 at 16:02

Sumanth Madishetty · Accepted Answer · 2021-04-19 16:38:27Z

1

The prop innerRef doesn't exist on NumberFormat component instead use getInputRef prop on NumberFormat

Example Implementation

<FormGroup className="mr-10 mb-10">
          <Label for="debitAmt" className="mr-sm-10">
            Debit Amt
          </Label>
          <Controller
            as={
              <NumberFormat
                thousandSeparator={true}
                prefix={"$"}
                onValueChange={(v) => {
                  setAddBill({
                    ...addBill,
                    debitAmt: v.floatValue === undefined ? "" : v.floatValue
                  });
                }}
              />
            }
            name="debitAmt"
            id="debitAmt"
            variant="outlined"
            defaultValue={addBill.debitAmt}
            getInputRef={register({ required: true })}
            aria-invalid={errors.debitAmt ? "true" : "false"}
            control={control}
            style={setErrorStyle(errors.debitAmt)}
          />
          {errors.debitAmt && (
            <span style={{ color: "red" }} role="alert">
              required
            </span>
          )}
        </FormGroup>

Example Sandbox here

answered Apr 19, 2021 at 16:38

Sumanth Madishetty

3,5952 gold badges16 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

myTest532 myTest532 Over a year ago

Perfect! Thank you.

myTest532 myTest532 Over a year ago

An odd behavior is that when I update the state of addBill.debitAmt in another part of the code that is not the onValueChange of NumberFormat, it doesn't update in the field. Why?

Sumanth Madishetty Over a year ago

@myTest532myTest532 You have to make the NumberFormat controllable to that the value will be up to date with state

myTest532 myTest532 Over a year ago

Could you please give me an example of it?

Collectives™ on Stack Overflow

React Hook using Controller for a custom Input

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related