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-
Related
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 have a list of components that contain dates(formatted with toLocaleString()) and other things. On top of them there is a component for creating new components, wich contains a form with some inputfields built with angulars FormBuilder.
When I type fast the validation lags and the text I'm typing isn't displayed immediately.
I assume that Angular is rerendering all components, because if I don't display the date in the other components I can type pretty fast without lags.
Is there a way to only rerender the input field I'm typing in, since all other components cannot change or is toLocaleString() the problem?
Is there a way to only rerender the input field I'm typing in, since all other components cannot change
Yes, for the components that will not change, set the change detection strategy for those components to OnPush. An OnPush component will then only be checked for changes if
any of its input properties changes
it fires an event (e.g., a button click)
an observable (which is an input property or a local-to-the-component property) fires an event, and | async is used in the template with the observable (see plunker in the comments below this answer)
import {Component, Input, ChangeDetectionStrategy} from 'angular2/core';
#Component({
...
changeDetection: ChangeDetectionStrategy.OnPush
})
Also consider listening for changes to your input by subscribing to the valueChanges Observable Angular makes available on your form element if you use ngFormControl. You can then use debounce() to only process changes every second or whatever time frame is appropriate:
<input type=text [ngFormControl]="input1Control">
constructor() {
this.input1Control = new Control();
}
ngOnInit() {
this.input1Control.valueChanges
.debounceTime(1000)
.subscribe(newValue => console.log(newValue))
}
See https://stackoverflow.com/a/36849347/215945 for a working plunker.
That's a known issue https://github.com/angular/angular/issues/6311
See also
https://github.com/angular/angular/issues/5808
https://github.com/angular/angular/issues/7822
https://github.com/angular/angular/issues/7971
There is also a pull request with a proposed fix, but seems not to be included in the latest beta release.
Knockout has the default behavior of updating the associated model if you change your focus (e.g. by clicking outside the input control) after editing the value inside an input control, populated by a binding of type Value.
Here is the link to the official documentation page explanation, section Parameters:
http://knockoutjs.com/documentation/value-binding.html
Do you know a way to disable this default behavior ?
The reason behind this : Im using Models that can tell if their last update requires persistent backup by comparing the previous value to the new one.
I would like to listen to the key up event on my form inputs but if I do that, knockout triggers twice event (the default one + the key up) to update the Model and the second one is basically telling my Model to replace the value by the same value because it is already updated, which it translates to "there is no need to do persistent backup since the value didnt change".
I would gladly appreciate any help or suggestion, since Im stuck and can't find a way around :)
EDIT
Couldnt reproduce the error with bare backbone code. It seems as "super cool" said that valueUpdate should override the default Blur event that triggers when you use form controls with binding Value.
It may be a bug introduced by the library Knockback that I use to create the ViewModel.
Despite all this, just replacing the binding Value by the binding textInput did the trick. Thank you all.
Don't listen to the event, subscribe to updates, which won't fire unless the value is changed. Using the textInput binding will register every change to the value, even those done using menu items like cut and paste, when they happen.
Equivalently, you can use the value binding along with valueUpdate: 'input'
vm = {
myvar: ko.observable(),
updates: ko.observableArray()
};
vm.myvar.subscribe(function(newValue) {
vm.updates.push(newValue);
});
ko.applyBindings(vm);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<input data-bind="textInput: myvar" />
<div data-bind="foreach: updates">
<div data-bind="text: $data"></div>
</div>
When developing a custom Kendo MVVM widget, passing a simple data-bound parameter seems fine, whether in a custom binding. IE:
<div data-bind="value: simpleParameter">This works fine</div>
<div data-bind="mybinding: simpleParameter">This also works fine</div>
I notice the css and events bindings can accept objects as parameters. I really want to accept objects as parameters too, but when I try, it throws an error:
<div data-role="mycomponent" data-bind="value: { prop: value }">This throws</div>
<div data-role="mycomponent" data-bind="mybinding: { prop: value }">This throws too</div>
In the case of the custom binding, it doesn't throw until I try accessing the value. I've tried it like...
var arg = this.bindings["mybinding"].get();
...and other variations, but nothing seems to work. Is it possible to accept objects like { prop: value, prop2: value2 } for custom Kendo UI widgets in their MVVM framework?
Your answer is in this article, Making Kendo UI Binders for Complex Types.
If you have tried to make a binder like this yourself, you have
probably run into issues. Kendo actually does not provide support for
these complex bind paths for custom binders.
Basically, Kendo UI expects your expressions to be a string representation of a variable or function name, not a complex object. What you have to do is call this.bindings.class.get() multiple times to retrieve the values you need.
To get these values for the get() function to read, you'll create a list of key/value pairs from the complex object in the binding's init() constructor method. Then, in your binding's refresh() method, you simply iterate over this list and call get().