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>
)
}
Related
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.
my reusable component looks like this `jsx
return <div>
<label className="label" htmlFor={name}>
</label>
<textarea
name={name}
aria-label={name}
id={id || name}
onChange={this.onChange}
value={value}
/>
</div>;
and its being pulled in like this below inside another component like this
<TxtareaComp
name="Lorem"
value={this.props.lorem}
id="lorem-ipsum"
onChange={this.props.lorem}
/>
and when its rendered it looks like this
<div><label class="label" for="Lorem">Lorem</label>
<textarea name="lorem" " id="Lorem">
</textarea>
</div>
works perfectly fine, but the problem is the its failing tests for accessibility
Its saying I am missing a label
Sniffybara::PageNotAccessibleError:
Form elements must have labels
Elements:
<TxtareaComp...
["#lorem-ipsum"]
Although there is a label, how can i bypass to fix this... while using the existing component?
for needs the id, not the name, of the input. So if you're setting the id via id={id || name} on the input, you need to set htmlFor the same way: htmlFor={id || name} on the label.
Of course, you have the other option: Putting the input inside the label. Then you don't need for or an id on the input (for this; you may need the id for something else). But whether you can do that depends on your styling.
Here is a little background on what I'm trying to do. When the user clicks on add trip, I am using Redux Form Field Arrays to create fields.
The problem I am facing is that I want the form in the field array to change based on what option the user selects for the trip type (Point-to-Point, Local Transportation). So, I followed an example off of the Redux Form API website for Selecting Form Values. This did not work for me because the field names are dynamic and I have no idea on how to do this with the dynamic field names. Here is the code I've tried and any help would be appreciated. Thanks!
Code for service type radio buttons:
<fieldset className="row">
<div className="col">
<Field name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Point" id="trip1_choice1"/>
<label htmlFor="trip1_choice1">
Point-to-Point
</label>
</div>
<div className="col">
<Field name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Local" id="trip1_choice2" />
<label htmlFor="trip1_choice2">
Local Transport
</label>
</div>
</fieldset>
Code for changing forms based on which radio button is selected:
{[`${member}.serviceType`] === "Point" &&
//HTML Form Code goes here
}
As you can see I'm having trouble with accessing the value of the dynamic field array. [${member}.serviceType] does not work.
If anyone faces the same problem here is an example on github of how it should be done.
The following is the code I implemented.
This shows how I was able to get a specific value and it also shows how you can get all the values of the dynamic form.
// Get values from form
const selector2 = getFormValues('wizard');
const selector = formValueSelector("wizard");
Member = connect((state, props) => ({
serviceTypeDyno: selector(state, `${props.member}.serviceType`),
formValuesDyno: selector2(state)
}))(Member);
The if statement would then be:
{serviceTypeDyno === "Point" && (
//HTML Form Code goes here
)}
If you're using getFormValues Selector:
{formValuesDyno.serviceType === "Point" && (
//HTML Form Code goes here
)}
Use ref's, ejem.
<Field ref='fieldName' name={`${member}.serviceType`} className="with-gap" component="input" type="radio" value="Point" id="trip1_choice1"/>
To access them use: this.refs.fieldName.getRenderedComponent().refs.input
Check this issue #1933 on redux-form repository
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.
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.