Add handles dynamically in reactive form

[frischka]

I`m trying to implement a range slider with ng2-nouislider into a reactive form.

I want to give the opportunity to split the range from 1 to 100. Maybe three ranges and first is 20, second is 50 and the last is 30. All together it is 100. And the user should be able to add more ranges and to change them.

I have a reactive form in my project and it is not possible for me to change to a template driven one.

Here is my stackblitz for the ngmodel variant that works like I want:

https://stackblitz.com/edit/ng2-nouislider-with-form-8vbrt4?file=src/app/app.component.html

And here is the stackblitz for the reactive form variant:

https://stackblitz.com/edit/ng2-nouislider-with-form-g8zpq4?file=src/app/app.component.html

In this documentation it sais the nouislider component has to be destroyed to add new handles:

https://refreshless.com/nouislider/more/#section-update

But I tried it also without destroy via the destroy method of nouislider in the ngmodel variant and it worked also well. The destroy via the if condition seems to be enough.

My problem is in the reactive form variant. If you try this example and push the plus button, you can see, that the handle is added, but the forms value is not correct after the reinitialization of the slider in the dom.

The value seems to be only for a short time correct, and then the array loses the last value.
In other words. If the value is [33,66] and should be [25,50,75] after the button click, the value is only very short correct, and the it is only [25,50].

It seems that the slider is not really destroyed and remembers the old array length of the start value. And after reinitialization it overrides the form value again.

So please.....

Is anybody able to help me here? I can not see any error in my code here.
Thanks in advance =)