I need to apply some styling to the label of a Redux Form Field. The Redux Form API doesn't mention any way to style the label. The classes.formField class gets applied to the field itself but not the label.
This may also be a question about forcing inheritance because the label, in this case, is not inheriting the parent's styles.
import { Field } from 'redux-form'
import TextField from 'redux-form-material-ui/lib/TextField'
<Field
className={classes.formField}
component={TextField}
label={'style me!!'}
fullWidth
name="answer"
required
type="text"
validate={[required]}
/>
Add your own <CustomLabel /> component to the label prop.
<Field
className={classes.formField}
component={TextField}
label={<CustomLabel/>}
fullWidth
name="answer"
required
type="text"
validate={[required]}
/>
Make custom label component and pass it
const CustomLabel = () => {
var labelStyle = {
color: 'white',
};
return <label style={labelStyle}> Im the custom label with css </label>
}
In React, inline styles are not specified as a string. Instead they
are specified with an object whose key is the camelCased version of
the style name, and whose value is the style's value, usually a string.
You can pass props directly to TextField using the props prop:
<Field
component={TextField}
props={{ className: classes.formField }}
label={'style me!!'}
fullWidth
name="answer"
required
type="text"
validate={[required]}
/>
Sadly this is undocumented on Redux-Form: Field docs :/
Related
"How can we remove this type of browser suggestion in Textfield inside form tag. User must need to type password without selecting from suggestion"
"Tried to add textfield autocomplete="off
<TextField
variant="outlined"
color="secondary"
fullWidth
classes={{
root: classes.textfieldRoot,
}}
type="password"
id="password"
value={password}
onChange={handleChange}
autoFocus
autoComplete="off"
inputProps={{
autoComplete: "new-password",
form: {
autoComplete: "off",
},
}}
/>
Most browsers don't let you disable autocompletion. See here for more info: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete.
There are some hacky ways to do it if you really need to (which I wouldn't recommend), like changing the input "type" to text and using JS to capture keystrokes and replace them with '*' characters or something, but there isn't a supported native way of doing it.
I would need to set the text of the Label, for the Formik Input Component, after the input field.
I am not sure how to target it and how to apply CSS.
So a code sample:
<div className="editable-job-title">
{isEditing ? (
<Formik
validateOnMount={true}
enableReinitialize
initialValues={user}
validationSchema={userNameValidationSchema}
onSubmit={handleSubmit}>
{(props) => (
<Form>
<Input
name="job_title"
type="text"
label={t('userForm.job_title.label')}
/>
<FormActions className="user-form-page__form-action">
<RoundButton
type="button"
onClick={stopEditing}
className="button button--cancel">
<Icon icon={x} />
</RoundButton>
</Form>
)}
</Formik>
So basically, I would need the Job Title text to be below the field.
Or any other nice solution.
I guess you want to use <Field> element from formik.
If this is the case, check it out on https://codesandbox.io/s/formik-tests-onchange-mo4fi?file=/src/App.js
import { Field, Formik, Form } from "formik";
import { TextField } from "#material-ui/core";
<Formik
initialValues={initialValues}
onSubmit={() => alert("submitted!")}
>
<Form>
<Field name="email">
{(props) => (
<>
<TextField
variant="outlined"
placeholder={props.field.name}
label={props.field.name}
{...props.field}
/>
</>
)}
</Field>
...
I tried to add a required element (when the box become red if not text is inside) on my form but without success, I installed react-strap, Bootstrap. when I apply many changed it didn't work for no reason
and it's just not moving if someone know why I would be happy.
render() {
return (
<div>
<form class="needs-validation" novalidate>
<InputGroup size="sm">
<InputGroupAddon addonType="append" className="m-2">
<Input
className="form-control"
placeholder="Add a new To-Do. "
onChange={(e) => this.updateInput(e.target.value)}
value={this.state.input}
onKeyPress={this.handleKeyPress}
required
/>
<Button
color="primary"
size="sm"
className="add-todo"
onClick={this.handleAddTodo}
>
Add
</Button>
</InputGroupAddon>
</InputGroup>
</form>
</div>
);
}
export default connect(null, { addTodo })(AddTodo);
// export default AddTodo;
What you are doing is passing required as a prop to your class Input. You need to add the html tag when the field renders, i.e. in Input.js:
return (
<input ... required={this.props.required}>
)
i think you should add the 'is-invalid' class to the input element if that field is empty.
https://getbootstrap.com/docs/4.0/components/forms/?#server-side
I'm still relatively new to working with redux form, as it is still very much black magic as to how it works, especially when it comes to prepopulating fields from data, it seems to just "happen".
Well I'm in the process of adding a <FieldArray> to an existing form that gets populated from data from an epic Observable's data. The problem is that the data that comes back is causing an error to occur
Uncaught TypeError: b.equals is not a function
at equals (index.js?3bd9:52)
at ConnectedFieldArray.shouldComponentUpdate (ConnectedFieldArray.js?c38c:87)
at checkShouldComponentUpdate (react-dom.development.js?61bb:11191)
at updateClassInstance (react-dom.development.js?61bb:11640)
at updateClassComponent (react-dom.development.js?61bb:14648)
at beginWork (react-dom.development.js?61bb:15598)
at performUnitOfWork (react-dom.development.js?61bb:19266)
at workLoop (react-dom.development.js?61bb:19306)
at HTMLUnknownElement.callCallback (react-dom.development.js?61bb:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js?61bb:199)
The only thing that makes sense to me is that the component that houses the <Field> elements are not matching up, in order for redux to populate the fields appropriately.
Here is my component that is fed into the <FieldArray> in my redux form:
import PropTypes from 'prop-types';
import React, { Fragment } from 'react';
import { Field } from 'redux-form/immutable';
const renderField = ({ input, label, type, meta: { touched, error } }) => (
<div>
<label>{label}</label>
<div>
<input {...input} type={type} placeholder={label} />
{touched && error && <span>{error}</span>}
</div>
</div>
);
const FormMilestones = ({ fields, meta }) => (
<Fragment>
{fields.map((milestone, index) => {
console.log('milestone?', milestone);
return (
<div key={index}>
<button
type="button"
title="Remove milestone"
onClick={() => fields.remove(index)}
/>
<Field
name={`${milestone}.name`}
component={renderField}
fullWidth
autoFocus
label="Milestone name"
/>
<Field
name={`${milestone}.startingAt`}
component={renderField}
fullWidth
autoFocus
label="Start date"
/>
<Field
name={`${milestone}.endingAt`}
component={renderField}
fullWidth
autoFocus
label="Ending At"
/>
<Field
name={`${milestone}.description`}
component={renderField}
fullWidth
autoFocus
label="Description"
/>
</div>
);
})}
<button type="button" onClick={() => fields.push()}>
+ Add Milestone
</button>
</Fragment>
);
FormMilestones.propTypes = {
fields: PropTypes.object.isRequired,
meta: PropTypes.object,
};
export default FormMilestones;
And here is the <FieldArray> that's used in my redux form. I didn't bother to copy the entire form, unless it's necessary, since my functionality issue exists within my <FormMilestones> component.
<FieldArray
name="milestones"
component={FormMilestones}
/>
Does anything obvious pop out to anyone?
Thanks in advance!
How do I apply any type of CSS to redux-form Field components? className and class are silently ignored:
<div>
<label>Name</label>
<div>
<Field
className="form-input"
name="formContactName"
component="input"
type="text"
placeholder="Person to contact"
/>
</div>
</div>
I was able to the apply the styles by creating a custom component:
<div>
<label>Name</label>
<div>
<Field
name="formContactName"
component={ customInput }
/>
</div>
</div>
but that's a major PITA and also largely negates the gains of using redux-form in the first place. Am I missing something? Note I added the className assignments directly in the custom component - I realize I can send them through as props in Field.
I tried setting input styles globally but they were ignored as well. The redux-form website docs tell you everything you need to know to use the rig but make no mention of CSS that I can see...
Thanks,
JB
Edit: this is not a duplicate - the answer pointed to uses a custom input component. As stated above, I can get that to work, but then there's really no need for redux-form in the first place.
#Jay: I was able to get this to work with a custom component by grabbing the code from the online docs:
class MyCustomInput extends Component {
render() {
const { input: { value, onChange } } = this.props
return (
<div>
<label htmlFor="formContactName" className="col-sm-2 control-label">Name:</label>
<div className="col-sm-10">
<input
id="formContactName"
placeholder="Person to contact"
className="form-control"
type="text"
/>
</div>
</div>
)
}
}
and then, in the redux-form Form code:
<div>
<label>Name</label>
<div>
<Field
name="formContactName"
component={ MyCustomInput }
/>
</div>
</div>
The bootstrap settings via className worked fine using this method.
All your custom props would be passed to the input component, so you can do
const CustomTextField = props => {
const { input, label, type, meta: { touched, error }, ...other } = props
return (
<TextField
label={label}
type={type}
error={!!(touched && error)}
helperText={touched && error}
{ ...input }
{ ...other }
/>
)
}
And then you can pass any props, including className to the CustomTextField
<Field
name="some"
component={CustomTextField}
className="css-applied"
/>