Hi I have upgraded to redux-form version 6.0.0 recently. And I am facing an issue like I am not able to type anything in the text field.
P.S I am also using Reactintl. I am using compose to aggregate connect, reduxform and intl decorator
Here is my code
Pastebin
If I understand correctly, then starting with v6 you should provide extra onBlur and onChange methods for the input in order to update its state. For your stateless component renderInput it could be done like this:
const renderInput = (field) => {
const onBlur = () => {
field.input.onBlur(field.input.value);
};
const onChange = (inputValue) => {
field.input.onChange(inputValue ? inputValue : '')
};
return <input {...field.input} onBlur={onBlur} onChange={onChange}
[...other options omitted for readability] />
}
Related
I want to update a custom property value inside a child component,
and also want to get event whenever the value is changed.
So, I tried both v-model: and #update:, like this.
<CustomName v-model:custom-name="name"
#update:custom-name="nameChanged"/>
// CustomName.vue
<script>
export default {
name: 'CustomName',
props: {
customName: String
},
emits: ['update:customName'],
setup(_, {emit}) {
const customNameChanged = (event) => {
emit('update:customName', event.target.value)
}
return {
customNameChanged
}
}
}
</script>
<template>
<input :value="customName" #change="customNameChanged"/>
</template>
I expected that name is changed and nameChanged is called,
but name is not changed.
I tried some cases at the vue sfc playground.
The result is,
(1) When I use camelCase, value is updated and method is called.
<CustomName v-model:customName="name4"
#update:customName="nameChanged"/>
(2) But when I use kebab-case, value is NOT changed and method is called.
<CustomName v-model:custom-name="name3"
#update:custom-name="nameChanged"/>
(3) Without #update:, camelCase and kebab-case are worked well.
<CustomName v-model:custom-name="name1"/>
<CustomName v-model:customName="name2"/>
Is this right? Is it illegal to use v-model with #update? Or should I use camelCase?
I have one Laravel Livewire model open as bellow code
public function confirmItemAdd()
{
$this->resetValidation();
$this->confirmingItemAdd = true;
}
and my model window code in blade is
<x-jet-dialog-modal wire:model="confirmingItemAdd">
I have one select2 in model and want to set value of select2 on variable name $s2v
After search I findout that
$('.select2').val(s2v).trigger('change');
how can I set value of select2 on load on model?
Thanks
You can trigger a browser event from the livewire component and listen for that event and change the select2 value accordingly (assuming the select2 part is wire:ignored).
public $s2v = 'Test value';
public function confirmItemAdd()
{
$this->resetValidation();
$this->confirmingItemAdd = true;
$this->dispatchBrowserEvent('change-select2', $this->s2v);
}
in your layout file or with the stack in layout file you can listen for this event and trigger the change for the select2 as below,
<script>
$(window).on('change-select2', (e) => {
$('.select2').val(e.detail).trigger('change');
});
</script>
Note e.detail is the $s2v value passed from the livewire component.
And what validation error is giving to you? you are reseting the validation error before the dispatchBrowserEvent...seem that even by JS you are changing the select2 value the property doesn't
EDITED
Ok, first a have a particular issue with select2 rendering after each refresh and find this solution. In the component a have this:
public function hydrate()
{
$this->emit('select2');
}
and in blade parent or script section
<script>
$(document).ready(function() {
window.initSelectCompanyDrop=()=>{
$('#selectCompany').select2({
placeholder: '{{ __('locale.Select a Company') }}',
allowClear: true});
}
initSelectCompanyDrop();
$('#selectCompany').on('change', function (e) {
livewire.emit('selectedCompanyItem', e.target.value)
});
window.livewire.on('select2',()=>{
initSelectCompanyDrop();
});
});
</script>
If your issue with error bag persist, so you have to look into the kind of validation you're doing. In other case, I define global $message for a validation message but only works for $this->validate. Once I need redefine the validation, using Validator::make I have to create a new var $message for that inside the method
I have the below switch statement that routes the user to correct component based on the link they are on.
const Router = (props) => {
switch(props.page) {
case 'Equities' :
this.props.pageName('Equities');
this.props.pageURL('/Equities');
return <Equities />;
case 'Daily' :
return <Daily />;
default :
return ( <Redirect to="/Equities" /> )
}
}
const content = ({ match }) => {
return (
<div className="content">
<Router page={match.params.type} />
</div>
);
}
const mapDispatchToProps = {
pageURL,
pageName
};
export default connect(mapDispatchToProps)(content);
On the 4th line above, I am trying to dispatch an action to Redux to update page name and URL in the redux store that the user is on. I get the below error:
How can I dispatch actions based on the page user is on so I update name and URL to whichever page user is visiting?
So, for anyone experiencing this problem, it seems to be caused by my error on adding redux to the page crashing with the compose module.
My component structure for the app is like this:
App -> Skeleton -> TopBar, Sidebar, Content
So inside Content component I have a switch that displays the correct content for user. I was trying to add this functionality to Content. Now I added to Skeleton, and it works fine and is much better because I don't need to add now 8 different statements inside switch saying if match this do this do that. Now all I have is this.props.pageName(match.url); this.props.pageURL(match.params.type); so I record in redux the user is on and that's all.
Is there a way to configure redux-form so that validation errors only show when the form is submitted?
Also I would like to clear an individual form field error when a user starts typing or makes a change.
Is this possible with redux-form?
You're responsible for rendering any validation errors, so you can configure them only to be visible after submission has failed (i.e. the user pressed submit and your validations came back as failing). For this, your input components wrapped with Field are passed a meta object as a prop that contains a submitFailed field that tells whether form submission has failed. The actual code for rendering that component could look something like this:
render() {
const { meta: { error, submitFailed } } = this.props
return (
// ... rendering the input and then some
{ error && submitFailed ? (
<span className="validation-error">{ error }</span>
) : null }
// ... rendering the rest
)
}
For not showing errors while the user is typing, you're responsible for enabling that behavior and the props passed to your wrapped input component hold the keys, this time the meta object holds a field called active, which tells you whether this input has focus or not. Code could be something like this (building on the previous example):
render() {
const { meta: { active, error, submitFailed } } = this.props
return (
// ... rendering the input and then some
{ !active && (error && submitFailed) ? (
<span className="validation-error">{ error }</span>
) : null }
// ... rendering the rest
)
}
Hope this helps!
I'm also had this problem, the reason was using touchOnChange flag
reduxForm({
form: 'MyForm',
enableReinitialize: true,
touchOnChange: true,
})
So I removed this flag from reduxForm options and the code started working correctly - I saw the validation errors on submit only
reduxForm({
form: 'MyForm',
enableReinitialize: true,
})
Example from official site
https://redux-form.com/8.2.2/examples/fieldlevelvalidation/
I'm working on a component where a button (input field of type 'submit') will submitting data once clicked. However, I'd like to introduce a safeguard to show an alert on screen if the input field is blank.
Thinking this would work the same way as it would for component attributes, I've tried variations on the following without much luck:
onClick={props.inputText === ''
?
alert("Text cannot be blank.")
:
(e => props.onSubmit(props.inputText))}/>
I'd rather not run the check inside the onSubmit function in order to isolate updates to the store as far as possible (I'm following a React-Redux structure).
Any idea if and how JSX handles a situation like this?
This should work:
onClick={() => { props.inputText === '' ?
alert("Text cannot be blank.") :
props.onSubmit(props.inputText) }}
You are assigning the value to onClick event, but onclick expect a function. To achieve that wrap all the logic inside a function body.
Write it like this:
onClick={ e => {
props.inputText === '' ?
alert("Text cannot be blank.")
:
props.onSubmit(props.inputText)}
}
/>
Or
onClick={this.onClick.bind(this)/>
onClick(e){
if(props.inputText === ''){
alert("Text cannot be blank.");
return;
}
props.onSubmit(props.inputText);
}