Can't set 'touched' to true - javascript

I just trying to create a custom Formik <Field />. It is a <input type = file /> with opacity=0 and depending of values i styling my <Error /> component and <input type = text />. values.photo is ok. The problem is that touched never becoming true, so i can't show my <Error /> component. Can you explain what goes wrong?
https://codesandbox.io/s/purple-violet-qgxr3?file=/src/components/FileInput.js

in your file input component just add this:
form.setTouched({...form.touched,[field.name]: true });
setTouched take object of fields and field.name is the file input name.

when you handle the file input by listening to onChange event.
As soon as that onChange method is called you can mark your field asTouched by calling
.markAsTouched() so that it would show the error if the condition in validated.

Related

Set value attribute in HTML

I am trying to set value attribute in HTML when it gets changed.
I need this because I export HTML code for importing it later.
I tried the following code:
<input onchange="this.value = value" />
And would like to have the following code so value gets auto-filled after import:
<input onchange="this.value = value" value="some-value" />
There is lots of lines like above but whatever I tried value just doesn't get set.
If you want the attribute to update, you got to set the attribute.
<input onchange="this.setAttribute('value', value)" />
Alternatively, you can add this JavaScript code and omit the onchange HTML attribute:
document.addEventListener("input", e => e.target.setAttribute('value', e.target.value));
<input>
Notes:
the input event triggers with every change, not just when the value is "entered".
this works for all input elements on the page, including textarea and select elements.

Clear redux form field (DatePicker) onclick 'x'

Hello I am using DatePicker from redux-form-material-ui and I can't clear the field - there is no way to do that withing this component which i described here:
https://github.com/erikras/redux-form-material-ui/issues/262
Therefore I want to add 'x' button on the field on the right and onclick it should clear the field... How i can do it? How I can access the field in the method?
<Field
name="dateOfBirth"
type="text"
component={DatePicker}
className={css.fullWidth}
fullWidth
formatDate={formatDate}
/>
It appears that redux-form-material-ui doesn't cleanly expose the ability to manipulate the field's value. But, it does suggest a way to dig into the children via refs.
In your case, it would look something like:
handleClick() {
this.refs.dobField // the Field
.getRenderedComponent() // on Field, returns ReduxFormMaterialUIDatePicker
.getRenderedComponent() // on ReduxFormMaterialUIDatePicker, returns DatePicker
.setState({ date: null}); // on DatePicker
}
Here's the DatePicker source code from the material-ui library (it appears that redux-form-material-ui is using an 0.x release, not 1.x).
Assuming you have:
render() {
return (
<form>
...
<Field name="dateOfBirth"
type="text"
component={DatePicker}
className={css.fullWidth}
fullWidth
formatDate={formatDate}
withRef // enable the option
ref="dobField" // name of ref; redux-form-material-ui makes it accessible via this.refs.dobField
/>
...
</form>
)
}

How to include form field attributes based on state in React?

I am trying to make an accessible form in React and I need to toggle the attribute aria-describedby based on the state of the field (i.e., if it has an error associated with it).
I know how to toggle the value of the attribute, but with regards to WCAG, a present but empty attribute of this type will fail. The entire attribute needs to be fully present or fully absent. Anything I try in-line throws errors and breaks the render.
To give an example, this is what I've been trying:
<label>
<input type="text" name="someName" ref="someRef" {!this.state.isValid ? aria-describedby="helperText" : ''} required />
<p id="helperText">Helper text for this form field.</p>
</label>
Again though, an empty attribute value for aria-describedby is invalid.
Is there any way to acheive this?
Just spread it like this:
<input type="text"
name="someName"
ref="someRef"
{... !this.state.isValid && {'aria-describedby': 'helperText'} }
required />
This is basically spread operator usage.

v-model in dynamic component

I have a list of dynamic components that I render with a for loop.
<component
v-for="component in components"
:key="component.componentId"
:is="component.type"
:componentId="component.componentId">
</component>
One of the different component types is an element that contains an input field. I want to attach v-model to that input.
<input type="text" :name="name">
works but when I do
<input type="text" :name="name" v-model="value">
I get no errors but the component is not rendered. However
<input type="text" :name="name" :value="value" #input="setValue">
works, if used with an appropriate method setValue to update the value attribute.
How should I use v-model in the component?
Apparently dynamic type bindings don't work with v-model. Found a commit in the repository that confirms this. For some reason it doesn't give me the warning, even though process.env.NODE_ENV == undefined.
In the original question I stripped a lot of code to make it more readable but seems like I missed the important part.

ReactJS: How to put <input/> inside a Material UI's <TextField/>?

I am trying to make <TextField/> (http://www.material-ui.com/#/components/text-field) as <input/>. So I attempted the following:
<TextField
hintText='Enter username'
>
<input
className="form-control"
ref='username'
type='text'
/>
</TextField>
But it is not picking up the ref correctly. When this.refs.username.value.trim() is logged, it displays an error that value is undefined. But when <input/> is used alone, it picks up the inputted text correctly.
What is the proper the way to use <input/> but with <TextField/> as wrapper for styling?
Thank you in advance!
I don't think you can have an input field inside a TextField component
Material UI's TextField Is An Input So all You need to do is add another TextField Below it add styling if you want them closer
you couldnt do <input><input></input></input> in normal HTML.
<TextField hintText="Hint" name="Name" fullWidth={true} onChange={this.handleChange} />
you just need a handle change function which you should be able to work out from googling if you need one.

Categories