Comments (26)
No, if the value is not an array still not works. However, I change array with function provided by useState. So it should understand the change.
from react-hook-form.
value is array may be the issue, cause it does shallow compare with value
can you share bit more code or a codesandbox would really help?
from react-hook-form.
oh ok, this is an example which I did for custom input. hopefully, it will help you abit
https://codesandbox.io/s/72j69vnk1x
from react-hook-form.
Thanks. But, my component is not a html form component. It has four inputs and the final value should be sum of all inputs.
from react-hook-form.
Oh ok.
Sounds like your four inputs should be one Component and register
as one field, and use setValue
to update value once it's finished the calculation.
share your code bit more, see if I can assist :)
from react-hook-form.
this is my custom component:
import React, {
useState,
useRef,
forwardRef,
useImperativeHandle
} from "react";
import styles from "./splitInput.module.scss";
const SplitInput = forwardRef((props: Props, ref: any) => {
const [value, setValue] = useState([...Array(props.length)]);
const elRef = useRef([...Array(props.length)].map(() => React.createRef()));
useImperativeHandle(
ref,
() => {
return {
type: "text",
name: props.name,
value: value.join("")
};
},
[value]
);
const onInputChange = (e, i) => {
e.persist();
if (e.target) {
setValue(value => {
value[i] = e.target.value;
return value;
});
if (i < props.length - 1 && e.target.value !== "") {
elRef.current[i + 1].current.focus();
}
props.onChange(value.join(""));
}
};
const onKeyDown = (e, i) => {
e.persist();
if (i > 0 && e.key === "Backspace") {
e.preventDefault();
var input = elRef.current[i].current;
input.value = "";
input = elRef.current[i - 1].current;
input.focus();
}
};
const renderInputs = () => {
let rows = [];
for (let i = 0; i < props.length; i++) {
rows.push(
<input
ref={elRef.current[i]}
key={i}
type="number"
autoFocus={i == 0}
onChange={e => onInputChange(e, i)}
onKeyDown={e => onKeyDown(e, i)}
className={styles.verficationCode}
/>
);
}
return rows;
};
return <div className={styles.verficationCodeBox}>{renderInputs()}</div>;
});
SplitInput.defaultProps = {
length: 4
};
export default SplitInput;
from react-hook-form.
import React, {
useState,
useRef,
forwardRef,
useImperativeHandle,
useEffect,
} from "react";
import styles from "./splitInput.module.scss";
const SplitInput = forwardRef((props: Props, ref: any) => {
const [value, setValue] = useState([...Array(props.length)]);
const elRef = useRef([...Array(props.length)].map(() => React.createRef()));
useEffect(() => {
// register a filed in react hook form
props.regsiter({
name: 'total'
})
}, []);
useEffect(() => {
// set field value when value is changing
props.setValue('total', value.join(""))
}, [value]);
const onInputChange = (e, i) => {
e.persist();
if (e.target) {
setValue(value => {
value[i] = e.target.value;
return value;
});
if (i < props.length - 1 && e.target.value !== "") {
elRef.current[i + 1].current.focus();
}
props.onChange(value.join(""));
}
};
const onKeyDown = (e, i) => {
e.persist();
if (i > 0 && e.key === "Backspace") {
e.preventDefault();
var input = elRef.current[i].current;
input.value = "";
input = elRef.current[i - 1].current;
input.focus();
}
};
const renderInputs = () => {
let rows = [];
for (let i = 0; i < props.length; i++) {
rows.push(
<input
ref={elRef.current[i]}
key={i}
type="number"
autoFocus={i == 0}
onChange={e => onInputChange(e, i)}
onKeyDown={e => onKeyDown(e, i)}
className={styles.verficationCode}
/>
);
}
return rows;
};
return <div className={styles.verficationCodeBox}>{renderInputs()}</div>;
});
SplitInput.defaultProps = {
length: 4
};
export default SplitInput;
what about this?
from react-hook-form.
It registers the field as the methods I did before. But, changing the value does not change the validation errors. And I cannot submit the form.
from react-hook-form.
You can use ‘setError(‘total’)’ to remove the error if value is valid .
from react-hook-form.
It adds an error like this to error list:
phone: {type: undefined, message: undefined, ref: undefined, isManual: true}
I have also another problem. I see an error in console:
index.es.js:364 Uncaught TypeError: Failed to execute 'contains' on 'Node': parameter 1 is not of type 'Node'.
at findRemovedFieldAndRemoveListener (index.es.js:364)
at index.es.js:738
at MutationObserver. (index.es.js:514)
from react-hook-form.
which version of react-hook-from do you have? 3.7.4 ?
from react-hook-form.
Yes, I have 3.7.4
from react-hook-form.
hmmm I will patch this bug tonight.
from react-hook-form.
Thanks. Great!
The problem with ‘setError(‘total’)’ is that I check it like this:
if (total) {
props.setError("total");
}
To remove required error.
But, when I type a char, the error disappears and with the next char error appears!
from react-hook-form.
and error is : phone: {type: undefined, message: undefined, ref: undefined, isManual: true}
?
from react-hook-form.
Yes!
from react-hook-form.
thanks, are you using validationSchema
? (sorry many questions, I try to drill down the issue)
from react-hook-form.
Thanks for great support :). No, I am not using validationSchema.
I use it this way:
useEffect(() => {
// register a filed in react hook form
props.register(
{
value: "",
name: "total",
type: "custom"
},
{ required: true }
);
}, []);
Note: It didn't work without type and value.
from react-hook-form.
no worries :) you only need name
, because it's not a real DOM element.
register({ name: 'total' }) will do
from react-hook-form.
I have patched https://github.com/bluebill1049/react-hook-form/releases/tag/3.7.5
let me know if that solved the issue. Thanks 👍
from react-hook-form.
Thanks, The last problem is solved greatly.
Now, there is another error at the console:
index.es.js:333 Uncaught TypeError: ref.removeEventListener is not a function
at removeAllEventListeners (index.es.js:333)
at findRemovedFieldAndRemoveListener (index.es.js:365)
at index.es.js:736
at MutationObserver.<anonymous> (index.es.js:514)
Is there any way to automatically check for errors on setValue? I mean without setting error manually.
from react-hook-form.
hmmm, are you still using this register with value
and type
?
try to do manual register
with just name
.
normally you shouldn't have to do things manually.
patched again with 3.7.8
from react-hook-form.
Looks like everything goes well :) Thank youuu
from react-hook-form.
❤️ can u show me how u register your custom input?
from react-hook-form.
useEffect(() => {
// register a filed in react hook form
props.register(
{
name: "total"
},
{ required: true }
);
}, []);
from react-hook-form.
sweet thanks :) happy coding. Are you happy to close the issue?
from react-hook-form.
Related Issues (20)
- Support for single input being tied to multiple forms
- issue: fieldArray.fields out of sync with form.watch() after reset HOT 1
- issue: When creating an input that only allows numbers through a controller, entering Korean results in the last digit being erased. HOT 2
- issue: watch not working as expected for nested components using useFormContext
- issue: `getFieldState(..).error` type is incorrect
- issue: register/unregister should affect isDirty in formState
- How to specify the default value type as the object
- issue: form.reset will cause useFieldArray to trigger watch subscription
- issue: radio buttons are not checked when "disabled" property is set HOT 4
- Method to update custom context after the form initialisation?
- issue: getFieldState from useFormContext does not have latest error state without referencing formState also
- issue: error object from both formState and fieldState are always undefined with useController HOT 1
- issue: Password match validation don't hide error, when input not mentioned in refine() 'path' has changed to valid
- issue: useFieldArray and getFieldState causes react console warnings HOT 4
- Form reset, append adds ghost empty fields HOT 5
- Allow JSX elements/React components to be returned as an error message HOT 3
- issue: setError does not work with ErrorMessage component
- issue: the `formState.errors`default type is incorrect
- issue: disabled property in useForm applied to Form Provider does not apply to all radio inputs HOT 1
- issue: valueAsDate parses based on current timezone HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-hook-form.