add event on input angular 2 dynamic form

Question

I have a form create with dynamic form following the tutorial in the cookbook now I want catch when some input change so how can add (change) events, send the function to call as param; something like

  new TextboxQuestion({
    key: 'test',
    label: 'Test ',
    type: 'text',
    onChange: 'test()',
    order: 0
  }) 

thanks

Answer 1

Since you're creating this form dynamically, you should therefore have access to it in your controller. Angular 2 uses the concept of the FormControl which is a very powerful tool for interacting with your form controls. I'll skip a lot of the details, but I'll point out a couple of things:

You've got access to FormControl.valueChanges, which might not be apparent from that doc because FormControl inherits from AbstractControl, a superclass that provides a huge chunk of useful functionality, much of which is very similar to the Angular 1 forms functionality.

Essentially, what you're looking to do is leverage observables. If you're unfamiliar with them, you should read about them. Christoph Burgdorf has a great article on them and actually, conveniently for you, uses FormControl.valueChanges as part of his example on how to use them. Oh what a lovely day it is!

But basically, in a nutshell, you're looking to do something along these lines:

this.textboxControl.valueChanges.subscribe(value => {
   //... do your stuff here with 'value'
});

This obviously assumes that you've got an instance of the form control that you're wanting to react to.

IT IS EXTREMELY IMPORTANT that when using observables you UNSUBSCRIBE in the ngOnDestroy method in your controller; otherwise the subscription will hang around after you're done with it and you have a memory leak.