I use template driven and am trying to initialize my form using patchValue and it is not working.
I can make it work if I use two-way binding to set values [(fooBar)] or even setTimeout but I was just wondering, is there a way to make it work with just patchValue?
https://stackblitz.com/edit/angular-fft2c5
Thank you.
It doesn't work because at the time of calling patchValue method there are no any controls registered in your form yet.
Why?
That's because Template-driven forms are asynchronous. They delegate creation of their form controls to directives. To avoid "changed after checked" errors, these directives take more than one cycle to build the entire control tree. That means you must wait a tick before manipulating any of the controls from within the component class.
Moreover, if you try using setValue method instead of patchValue Angular will even warn you how to deal with it.
this.myForm.control.setValue({name: this.name});
ERROR Error: There are no form controls registered with this group
yet. If you're using ngModel, you may want to check next tick (e.g.
use setTimeout).
So, as you already discovered, you have to either use [ngModel] binding or wait next tick by using e.g setTimeout or requestAnimationFrame
Scheduling microtask should also work if you would use it in ngAfterViewInit hook:
ngAfterViewInit() {
Promise.resolve().then(() => {
this.myForm.control.patchValue({ name: this.name });
});
}
In template driven forms, you need to bind [(ngModel] to set values.
Try like this:
.html
<input name="name" [(ngModel)]="formValue.name"/>
.ts
formValue:any = {}
ngOnInit() {
this.formValue = {name: this.name}
}
Working Demo
Related
Angular 2 data binding is great but i can't seem to find a angular 2 way of removing data binding on specific variables. My reason for this is i started hooking my application up to indexed DB and it works but i can't allow the temporary cache (just an array of all the indexed DB values) to be subject to data binding (if it was then the temporary cache would no longer mirror the database) my database is on an angular2 service. now i have found a way of removing the data binding but it isn't exactly pretty my code is this
app.copy=function(item){
return JSON.parse(JSON.stringify(item,app.replacer),app.reviver);
}
app.reviver=function(key,value){
if(value.fn){
value=new Function(value.parameters,value.body);
}else if(key==="time"){
value= new Date(value);
}
return value;
};
app.replacer=function(key,value){
if(typeof value ==="function"){
value=value.toString();
value={
fn:true,
parameters:value.match(/\(([\s\S]*?)\)/)[1].replace(/[\s\r\/\*]/g,""),
body:value.match(/\{([\s\S]*)\}/)[1].replace(/[\t\r\n]/g,"")
};
}
return value;
};
like i said it works but it isn't pretty. i can just run app.copy on the variables before they leave the cache so that they don't get data bound to anything. I was wondering if there was a cleaner way to tell angular 2 this variable isn't suppose to be data bound. and if not then at least i was able to get my solution up here for others.
If you establish "binding" imperatively you can stop the binding imperatively. There is currently no support in Angular2 to cancel a declarative binding imperatively.
Bind the view only to fields of the component.
Use observables in the service that fire an event when values change.
In the component subscribe to the observable and update the fields in the component when values in the service change.
Update values in the service when values change in the component.
I have a complex knockout viewmodel that has been created using the mapping plugin. I also update the viewmodel using the mapping plugin:
ko.mapping.fromJS(json, viewmodel);
I have a couple of subscriptions that use more than one viewmodel field to calculate a result. The mapping plugin updates each field separately and knockout executes the subscriptions on every change. Because not all values are updated on the same time the calculations sometimes work with a mix of old and new values for different field, which causes issues in my case.
Is there are way to tell the mapping plugin or knockout in general to wait with the evaluation of dependencies until I tell it that all values have been set?
What I ended up doing was creating a observable in my viewmodel that was given a value after the batch update finished. I also defined a manual subscription that executes the relevant code at that moment:
viewmodel.finishedBatchUpdate : ko.observable();
...
ko.mapping.fromJS(json, viewmodel);
viewmodel.finishedBatchUpdate.notifySubscribers(true);
...
viewModel.finishedBatchUpdate.subscribe(function() {
// my code
});
I could have also created a pureComputed and have that depend on this observable, but I do not need to bind anything on this pureComputed itself. Having a manual subscription is cleaner in my view.
I recently started learning mithril.js and I'm wondering how can I make very basic Model -> View one way data binding app.
TestModel = function(data){
this.name = m.prop(data.name)
}
testModel = new TestModel({name: "John"})
code above declare a model and it works perfectly as getter/setter.
but how can I set an event listener for the model event like Backbone's listenTo('model',"change",callbackFunc)?
all sample codes I saw are setting events for actual user actions like click,keyup or onchange.but never listen to actual model value's state directly.
am I missing something or am I understanding how to use mithril.js wrongly?
thanks in advance.
One of the key ideas with Mithril is that changes usually happens after an event:
A user action like onclick or keyup defined in a m() view template
An ajax request made with m.request
Mithril automatically redraws after those, alleviating the need for most listeners.
If you are updating your models through some other method and you need to redraw manually, use m.redraw or m.startComputation / m.endComputation. Thanks to Mithril's DOM diff algorithm, redraws are very cheap so don't be afraid to use them (with some common sense, of course!) Check out the m.redraw documentation for more info.
I've a view with knockout.js which has some textboxes and dropdowns.
known when the user changes a value i save the data with a $post
for this i created some computed propties like
self.subjectChanged ko.computed(function () {
var subject self.subject();
//save...
But this also triggers when the subject was loaded from database and set for first time.
What is the best practice for this ?
A similar problem is that i have a function getdata() which depends on two properties.
Now on load this method is raised twice (for each property)
What are best practices to handle this szenarios ?
One way of doing it is to load the page and bind the data as normal, and then use subscriptions to monitor changes to the observable you are interested in.
http://knockoutjs.com/documentation/observables.html#explicitly-subscribing-to-observables
viewModel.subject.subscribe(function(newValue) {
// code you want to run when the value changes...
});
for example http://jsfiddle.net/m8mb5/
This may not be best practice, but in the past I tied a loaded variable to the vm and when the data finished loading from the server I set it to true;
In my computeds I would surround the code that actually did the work in an if that checked the loaded. Computeds can be a little tricky though, you may need to reference the observables outside of the if to ensure they fire correctly.
com = ko.computed(function(){
if(loaded){
var subject = self.subject();
}
// reference observable outside of if to ensure the computed fires when the observable changes
self.subject();
});
This isn't an ideal situation, but due to another knockout binding I am using I am in a situation where I am needing to get the element an observable is bound to, if it is indeed bound to anything.
So is there a way to do this?
== Update ==
I didn't want to add any extra context incase it confuses the question, but as it may get an answer more in line with expectations here is the scenario.
I am using the knockout validation binding, which exposes all the errors using the ko.validation.group(model) method. However the problem is that only gives you the textual errors, it does not give you any context as to what part of the model gave you those errors. So I have made a small change to the source to now pass back the observable tied to each error, as this may be useful for a few scenarios, but from here I need to be able to tie this to an element so I can display some in-line validation of some kind.
Knockout Validation provides a very basic in-line validation where it creates a span after your element and you can give it a class, but this is too basic for my needs as currently we are using Qtip and other notification systems to display validation errors, and because of this I need to be able to have a Dom element and an error. So far I have an observable and an error, but I need to tie that observable object (which could be any ko.observable() property from the model) to its given DOM element, if it does have an element binding.
As all I have is an object and I am using validation driven from the model not the UI, the problem is not really going to be solved via a custom binding. Ideally I need to be able to crack open the marry up the observable object (an unknown ko.observable()) to an element.
Not to go too project specific, but my current project abstracts validation where events are fired off (i.e EventSystem.SendEvent(ValidationEvents.ValidationFailed, <element>, <error>)) then a validation system listens for these events and ties the error to the element, be it a tooltip, a growl style notification, an alert box etc. So I am trying to find the best way to keep this abstraction when driving the validation from the models observables not the ui's DOM elements (i.e jquery-ui)
== Edit 2 ==
I was a bit thrown by the way Knockout Validation knows the elements for observables to put in its own validation elements, however they just piggy back off the existing value binding, so I am just going to change that to add the elements for any validation elements based on their isValidatable() method, at least that way for each error I can tie it to an observable, and for any observables with element bindings I can tie them to the elements, and if there are none then it is fine they would just be form wide validation errors. I will give this a try as this should be something like (not tested yet):
if(utils.isValidatable(valueAccessor())) {
valueAccessor().extend({hasElementalBinding: true, elementalBinding: element});
}
else {
valueAccessor().extend({hasElementalBinding: false});
}
At around line 250 in the registerValueBindingHandler, I will leave this question open for a while longer incase someone else has a better solution.
I have done something similar to what you mentioned above. My data-bind tag includes a custom binding:
data-bind="... myvalidationbinding: myobservable"
Then in my binding handler I extend the observable
ko.bindingHandlers.myvalidationbinding = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
valueAccessor().extend({element: element });
}
};
And finally my extension is
ko.extenders.element = function (target, element) {
target.DOMElement = element;
}
Now I can subscribe to isValid() given by knockout.validation and if not valid, go get the element the observable is bound to and then manipulate it with jQuery.
This won't be very fast, so I would definitely cache the results, but something using jQuery's attribute selectors:
$('[data-bind*="Property"]')
*= is the attribute contains selector: http://api.jquery.com/attribute-contains-selector/
Obviously this won't catch anything that subscribed manually using the .subscribe method, but I'm not sure how you would extract element's from the functions anyway.
Disclaimer: while this solution will probably work, this sounds like a horrible idea to me, I would instead write a custom binding (as mentioned in the comments) or find some other solution.