I am thinking to use redux Form for my application.
can we maintain an object for text input types.
ex: I have one field Title so in redux store i want to main it as:
Title: {
en_US: "This is in English",
en_GB: "This is UK English",
fr_FR: "This is in french"
}
So I have flags for selecting languages whenever i change the language my form should be rendered with the locale selected.
Thanks
Yes, it's possible, but it has nothing to do with redux-form. You could just render the label for an input independently:
<label>{this.props.myTextLabel}</label>
<Field id="myText" /> // Field comes from redux-form
Another option is to use a custom component and pass the title to it:
<Field id="myText" component={MyInput} label={this.props.myTextLabel} />
const MyInput = ({ ..., label }) => {
return (
<div>
<label>{label}</label>
<input type="text" ... />
</div>
)
}
Related
Hi i'm using Formik and Yub library to validate Forms .I'm stuck in uncontrolled input of text to be controlled
In the beginning i have problem that Initial Values and i fixed with enableReinitialize={true} in Formik .But now with Field. On the document says Field can automatically inject onChnange and need props for input here
So I did like this
import { Formik, Form, Field } from 'formik';
<Formik
initialValues={intialData}
validationSchema={validationRules}
onSubmit={e=>console.log(e)}
>
{({ errors, setFieldValue, setFieldTouched, values, handleChange }) => (
<Form>
<Field name="name" value={data.name} /> //i have tried explicitly added type="text"
{error.name ? errors.name: ''}
</From>
)}
</Formik>
I didn't use onChange because Field automatically inject .But by giving like this
<Field name="name" value={data.name} />
i can't edit on field shows uncontrolled error so I tried like this
<Field name="name" defaultValue={data.name} /> // without giving onchange this also cant edit
so I tried like this
<Field name="name" defaultValue={data.name||""}/> // its working but the warning about uncontrolled input not going away
How get rid uncontrolled issue in Formik field .Im i doing in right way?
the Initial value is my issue i fixed with this answer
New to Formik. I am trying to CSS format the field that will be emitted by Formik , but am coming up short. Is wrapping each Field with a the right approach? I was hoping to pass a style attribute to but it doesnt accept one.
You can pass className="your-class", and then style the class as needed.
<Field
className="main"
type="number"
name="numberInput"
... other props here ...
/>
will give you:
<input name="numberInput" class="main" type="number">
Im using reduxform to generate a survey which includes some radiobutton questions. The problem is that whenever I change the value of the radio button I get this error:
Uncaught Error: Must access array elements with a number, not "undefined".
at deleteInWithPath (deleteIn.js:21)
at deleteInWithPath (deleteIn.js:35)
at deleteIn (deleteIn.js:61)
at createReducer.js:233
at reducer (createReducer.js:548)
at createReducer.js:566
at combination (combineReducers.js:120)
at autoRehydrate.js:30
at computeNextEntry (<anonymous>:2:27469)
at recomputeStates (<anonymous>:2:27769)
I don't know what is causing the error so any helped to spot it would be appreciated.
This is the component that render the radio buttons.
export const QuestionYesNo=({question,valueQuestion,metaData})=>{
let error=null;
if(metaData!==undefined){
if(metaData[question.id]!==undefined){
if((valueQuestion(question.id)===undefined ||valueQuestion(question.id)==='') && metaData[question.id].touched===true){
error=<h4 style={{color:'red'}}>¡Required!</h4>
}
}
}
return(
<div>
<div className="question">
<div><h3>{question.ordinal+"- "+question.name}</h3></div>
<div>
<label>
<Field
name={""+question.id}
component="input"
type="radio"
value="YES"
/>{' '}
Si
</label>
<label>
<Field
name={""+question.id}
component="input"
type="radio"
value="NO"
/>{' '}
No
</label>
</div>
</div>
{error}
</div>
);
};
The above component is inside another component in a loop for each question. The component that contains the above component is the one that has the reduxForm.
This is a bug/limitation of redux-form. Prefix your field names with a letter or with a letter followed by a period if you want your form values to be in an array when passed to onSubmit.
So rather than
name={""+question.id}
do
name={"question"+question.id} // results in {question0: "foo", question1: "bar"}
or (if your ids are monotonically increasing integers starting from zero):
name={"questions."+question.id} // results in array {questions: ["foo", "bar"]}
More info: https://github.com/erikras/redux-form/issues/3753#issuecomment-406435226
I have a FormField from ReduxForm that I want to make bold for its label. But I don't want to bold the entire label. Just a specific word within it. I know you can do this with a normal label for by placing a span with a class in vanilla html, but how do I do this with Redux Form?
Just specify a label prop which accepts a string or a node:
export const renderField = ({ label, input, meta, ...props }) => (
<div>
<label>{ label }</label>
<input { ...input } />
</div>
);
// In your form
<Field component={renderField} label="Foo bar baz" />
<Field component={renderField} label={ <span>Foo <strong>bar</strong> baz</span> } />
I would like to allow users to be able to enter multiple dates, and was hoping I could use the repeatable form field type (new as of Joomla 3.3).
I do get the modal popup with rows to add/remove items, however the calendar icon does not popup a calendar picker. I tried with just a text input and that seems to work ok.
The relevant part of my form definition:
<field
name="event_dates"
type="repeatable"
id="event_dates"
icon="calendar"
label="Event calendar dates"
select="Select dates"
>
<fields name="jmfields_event_dates">
<fieldset
name="event_dates_modal"
repeat="true"
hidden="true">
<field
name="event_date"
type="calendar"
format="%d-%m-%Y"
label="Date"
/>
</fieldset>
</fields>
</field>
I haven't tried to have a calendar field inside the Repeatable field, but Repeatable field is too buggy yet with a bunch of javascript issues/conflicts. Check in your browser error console for any such issues. I would suggest to wait till Repeatable Field becomes more stable.
I also wanted to do the same, and instead of the default calendar field I end-up using the jQuery date picker on a normal text field instead. You add the jQuery script on the page to target the input field and you have a little work around until the actual fix for the default calendar is out.
You need these files in your header:
JHtml::_('jquery.framework');
JHtml::_('jquery.ui');
$doc =& JFactory::getDocument();
// loaded from the code.jquery.com site
$doc->addStylesheet('http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css');
// I downloaded the datepicker only and placed it in this folder
$doc->addScript(JURI::root().'/media/jui/js/datepicker/jquery-ui.min.js');
The xml for the field:
<!-- Course_date Field. Type: Repeatable. (joomla) -->
<field
type="repeatable"
name="course_date"
label="Course Dates"
description="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_DESCRIPTION"
id="course_date"
class="course_dates"
select="COM_LEARNINGMANAGER_EVENT_COURSE_DATE_SELECT"
icon="list"
maximum="50">
<fields name="course_date_fields" label="">
<fieldset hidden="true" name="course_date_modal" repeat="true">
<!-- Course Field. Type: Courses. (custom) -->
<field
type="courses"
name="course"
label="COM_LEARNINGMANAGER_EVENT_COURSE_LABEL"
class="list_class"
button="false"
/>
<!-- Date Field. Type: Text. (joomla) -->
<field
type="text"
name="date"
label="COM_LEARNINGMANAGER_EVENT_DATE_LABEL"
size="20"
maxlength="50"
description="COM_LEARNINGMANAGER_EVENT_DATE_DESCRIPTION"
class="text_area datepicker"
readonly="false"
disabled="false"
filter="STRING"
message="Error! Please add date here."
hint="COM_LEARNINGMANAGER_EVENT_DATE_HINT"
/>
</fieldset>
</fields>
</field>
Here is the script you need to add to the default.php or edit.php file:
<script type="text/javascript">
// means your repteable field can only take 50 rows
<?php $fieldNrs = range(1,50,1); ?>
jQuery('input.form-field-repeatable').on('row-add', function (e) {
<?php foreach($fieldNrs as $nr): ?>
jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').datepicker(
{
minDate: -1,
prevText: '',
nextText: '',
maxDate: '+3M',
firstDay: 1,
dateFormat: 'yy-mm-dd',
onSelect: function(dateText, inst) {
jQuery('#jform_course_date_fields_date-<?php echo $nr ?>').val(dateText);
}
});
<? endforeach; ?>
});
</script>
Enjoy!
You can try with this ("Multiplier module"). I used different approach to get same result like with Joomla repeatable form field type, and also with that avoid "pop-ups inside popup". Still in development phase, but maybe you can try with that concept. Regards.
What I did to solve similar problem?
I had a similar problem with default Joomla repeatable form field type, especially with "pop-up" form fields type (eg. Joomla "date"). Because of that I created some kind of module pattern (mod_multiplier) where I used different approach -> I wouldn't repeat form of fields (section), I want to use same section for multiple insertion.
Module mod_multiplier
Inside module xml file are 3 reserved fields "wrapper", "repeater", and "content".
Inside "wrapper" is the place for "repeatable" fields:
<fieldset name="basic" addfieldpath="/modules/mod_multiplier/models/fields">
<!-- Wrapper is container for repeatable fields-->
<fields name="wrapper">
<!--This is the place where you insert your fields-->
</fields>
<field name="repeater" label="" type="repeater" />
<field name="content" hidden="true" label="Content" type="hidden" />
</fieldset>
All content would be stored inside "content" field in JSON format. Every time when we press form "Add" button we will add one row of data to "content" field. After all, inside "content" we will have rows of data.
How that look inside tmpl/default.php file and how to get fields values?
Hierarchical data structure has 3 levels: rows, row and field.
all data => $rows
one row of data => $row
one field => $row->field_name
Practical example from mod_multiplier:
Inside "wrapper" are fields "country", and "city" and we call them by name (inside tmpl/default.php) like this:
<ul>
<?php foreach ($rows as $row):?>
<li>
<?php echo $row->country;?>:<?php echo $row->city;?>
</li>
<?php endforeach; ?>
</ul>