We Keep Coding

Remove special character from input form

I'm new to JavaScript and already go through similar questions. I create an input mask for phone number where it has the region code in the form. However, it saves in the database together with the region code. How can I remove special character from an input form? For example:
(+60)123456789 --> 0123456789
I have this block of code where the input form goes:
<div className="mt-4">
<InputMaskComponent
id="company_phone_no"
mask="+(60)999999999999"
label="Company Phone Number"
value={(formState.company_phone_no || '').replace(/[^a-zA-Z0-9 ]/g, '')}
variant="standard"
onChange={handleChange}
>
</InputMaskComponent>
</div>
I try to use the replace() but still cannot managed to get it right. I already have this mask.js component:
export default function InputMaskComponent({id,mask,value,onChange,label,variant}) {
return (
<InputMask
id={id}
name={id}
mask={mask}
maskChar=""
value={value}
onChange={onChange}
>
{()=> <TextField fullWidth id={id} name={id} label={label} variant={variant} />}
</InputMask>
);
}

React From Group input field is not working

I attached dropdown items to my form group input field (image below). When I add onChange() key in order to get its value, I cannot write anything to input field. But when I remove onChange() key, it is working, I am able to write anything, but I need to get the value of input field. Is there any other way than onChange() key or any solution? Thank you in advance :)
Here is the my code:
<Form.Control
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
size="sm"
type="text"
className="search-or-jump shadow-none"
placeholder="Search or jump to..."
onChange={event => setSearchName(event.target.value)}
/>
{children}
</Form.Group>

You have to add value attributes, like
<Form.Control
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
size="sm"
type="text"
className="search-or-jump shadow-none"
placeholder="Search or jump to..."
value={searchName}
onChange={event => setSearchName(event.target.value)}
/>
{children}
</Form.Group>
Your code didn't have value attribule but you called 'value' on 'onChange' that why your code didn't work.

I want to disable keyboard input for this date picker how to do that?

please check this link and tell me which props or event should I use for this....
https://codesandbox.io/s/charming-frost-qrvwe?file=/src/App.js

use inputProps property .
<TextField
id="date"
label="Birthday"
type="month"
defaultValue="2017-05"
className={classes.textField}
InputLabelProps={{
shrink: true,
}}
InputProps={{
readOnly: true,
}}
/>

Form.Provider does not work properly saving data

I use in my react application Form.Provider from Ant Design library.I use it, because i generate inner forms inside main form. My target is, when i will click on SUBMIT button, to output in the same time data from outer form and from inner forms. The number of inner forms depend by user, so he can generate as many he wants.
My outer form:
<Form.Provider
onFormFinish={(name, { values, forms }) => {
console.log(forms);
if (name === "inner") {
const { inner } = forms;
const innerF = inner.getFieldValue("first") || [];
console.log(innerF);
}
}}
>
<Form name="outter" onFinish={onFinish}>
{nr.map(i => (
<div>
<p key={i}>{i}</p>
<Inner nr={i} />
</div>
))}
<Form.Item name="nr" label="Nr">
<InputNumber min={1} max={5} onChange={handleInputChange} />;
</Form.Item>
<Form.Item>
<Button htmlType="submit" type="primary">
Submit
</Button>
</Form.Item>
</Form>
</Form.Provider>
And my inner form
<Form name="inner" onFinish={onFinish} autoComplete="off">
<Form.List name="users">
{(fields, { add, remove }) => {
return (
<div>
{fields.map(field => (
<Space
key={field.key}
style={{ display: "flex", marginBottom: 8 }}
align="start"
>
<Form.Item
{...field}
name={[field.name, "first"]}
fieldKey={[field.fieldKey, "first"]}
rules={[{ required: true, message: "Missing first name" }]}
>
<Input placeholder="First Name" />
</Form.Item>
<Form.Item
{...field}
name={[field.name, "last"]}
fieldKey={[field.fieldKey, "last"]}
rules={[{ required: true, message: "Missing last name" }]}
>
<Input placeholder="Last Name" />
</Form.Item>
<MinusCircleOutlined
onClick={() => {
remove(field.name);
}}
/>
</Space>
))}
<Form.Item>
<Button
type="dashed"
onClick={() => {
add();
}}
block
>
<PlusOutlined /> Add field
</Button>
</Form.Item>
</div>
);
}}
</Form.List>
<Form.Item>
<Button ref={myRef} type="primary" htmlType="submit">
-
</Button>
</Form.Item>
</Form>
I added Form.Provider in outer form but i can't figure out how to get all values from inner form and from outer form in the same thime, clicking on SUBMIT button.
Demo: https://codesandbox.io/s/mutable-tree-5c1y1?file=/Outer.js:485-1291
Question: Why Form.Provider does not work and how to output all data, from inner, and from outer form, clicking on the SUBMIT button?

From what I can understand after reading a little bit of the documentation of Ant Design, in order for the outer onFinish to run, one of the forms need to submit. This can either be achieved by holding the reference of the form from the outer component and calling submit(), or declaring the button as a children of the Form.Item. In the second case, you would get a button after every form. Which is something you don't want. I would say go for the solution I have provided in here after the "Edit" part.

react hook form, A component is changing a controlled input of type hidden to be uncontrolled

i have a problem with use onChange method inside a Controller tag from react-hook-form. I need capture when the user select a field to render a new one downside, with information relationship in the last one.
Im using react-hook-form with MUI
<FormControl>
<InputLabel>Universidad</InputLabel>
<Controller
as={
<Select placeholder="Universidad">
{universities.map((item, i) => {
return (
<MenuItem value={item.value} key={i}>
{item.label}
</MenuItem>
);
})}
</Select>
}
name="university"
control={control}
onChange={([event]) => {
console.log(event.target.value);
}}
defaultValue=""
/>
</FormControl>