Does anyone have a simple autofill example using redux-form v6? I would use defaultValue, but I guess redux-form renders controlled inputs. I also would like to avoid setStates if possible. Thanks.
You need to use initialValues property.
Example:
<FormPost
enableReinitialize
initialValues={
name: 'Default Name'
}
/>
Related
I'm using the react FormControl like so:
<FormControl
type={"datetime-local"}
value={field.value}
onChange={field.onChange}
isInvalid={props.errors[name]}
/>
{form.errors[name] && (
<div className="custom-invalid-feedback">{form.errors[name]}</div>
)}
</FormGroup>
But it's editable by text input. I want it so that the date can only be selected from the dropdown and not by entering text. Is there a way to do this with FormControl, or is there another form that works with Formik that can be used?
There is officially no such attribute that would help you with your use case: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attributes
Nore has the Form.Control component anything helpful: https://react-bootstrap.netlify.app/forms/form-control/#form-control-props
So what you need to do is to take control of rendering the input and the widget:
Define a state for the datetime value
Place a toggle which shows/hides some date/datetime widget
When widget sets a value, set the state as well
Reflect this state on the toggle label/title
I have set up a sandbox with an example: https://codesandbox.io/s/dry-shadow-nwi877.
I'm using "react-datetime" library as an example, but it's up to you what widget library you want to use. For the toogle, Dropdown component is used.
I have a Vue component in a Vue component, and both of them contain one form each that I want to validate individually.
<form #submit="submitLogin">
Input fields and button
</form>
<OtherComponent />
Where the other component has a similar form. It appears when I use handleSubmit the main component will try to handle all the input fields, and the handleSubmit in OtherComponent does not work at all.
const { handleSubmit } = useForm();
I also tried a workaround where I instead used validate, manually ran a validation on button clicks and checking meta valid to see if the form was valid.
const { validate, meta } = useForm()
The same thing happened here, since both components use validate useForm it messes up the OtherComponent's one. When I check the meta it says it's always valid even if it isn't.
I have thought about putting them in the same component but don't see how that would make a difference.
Is there a way to achieve this or do I have to someone work around it?
I had the same problem, you can track this issue on vee-validate github:
https://github.com/logaretm/vee-validate/issues/3204
Currently, to avoid this bug you have to discharge a wrapper component for each of your form, like this:
<ComponentWithForm />
<AnotherComponentWithForm />
i have to fix a vuetify custom component that extends from Vue Class and includes a V-Select component. The dropdown is working fine but since its just a trigger pad to pop open modals the requirement is to reset/clear the dropdown selection after onchange event. basically i think i need to trigger the clearableCallback but i am not sure how to do it. First of all i have the problem that when i bind a method from the parent component the scope is always the parent so this refers to the extend parent component class. so i wonder how to get into the scope of the v-select component. i can not see apart from the clearable prop there is no native functionality for what i am trying to do. any hints? thanks
I am not sure I fully understand your question, but if I do, you may try using #change event on the v-select and use a method in which you open modals and reset the value of the v-select model to any desired one.
<v-select
v-model="select"
#change="someMethod"
>
</v-select>
...
methods: {
someMethod(){
this.openModal(this.select);
this.select = 0;
}
Setting the value to 0 only worked for the first change for me. Every subsequent change did not reset the displayed value. The only thing that worked consistently for me was using $nextTick. e.g.
onInput() {
this.$nextTick(() => {
this.select = 0;
});
}
It seems to be something to do with vuetify's internal implementation, and the lazyValue getting out of sync with the value prop.
As I far understand your question. The solution could be using the ref key in the v-select element and call the reset() function.
For example
In HTML
<v-select #change="handleOnSelectChange"
ref="selectedEl"/>
In vue methods
methods:{ handleOnSelectChange:function(){this.$refs["selectedEl"].reset();}}
I'm trying to wrap a TexField ui to a new custom component so that I can add extra functionalities and reuse the component within the project. I want it to still have the v-model binding so I implemented the following:
:text="text"
and
#textChange="(update)=>{$emit('textChange', update.value)}"
Wherein "text" is its prop named and exposed exactly as a normal TextField prop.
The pattern should work on web but I don't know if it's possible on nativescript vue component. Please have a look at the code I made in playground: https://play.nativescript.org/?template=play-vue&id=Ikap1R&v=1
It's not working. Please help if you know the solution.
Thanks
There is nothing you have to do specifically for {N}, if you know how it works with Vue.js, you got it.
All you have to do is, use a value prop for input value and emit input event on change.
Updated Playground
I am creating a custom input to handle a toggle switch.
Form component
<Field
label='Link to individuals'
name='employeeLink'
value={true}
component={Switch}
/>
If I log this.props.input.value of the Switch component I get value: "". How do I pass the initial value as seen in the form component to the Switch? Updating the value works as expected.
Or do I need to call componentDidMount as below? If yes, will it not always be dirty?
componentDidMount() {
this.props.input.onChange(this.props.input.value);
}
Totally forgot that redux-form provides a way to pass initial values
See:
http://redux-form.com/6.4.3/examples/initializeFromState/
http://redux-form.com/6.4.3/docs/api/ReduxForm.md/#-initialvalues-object-string-string-optional-