The problems with jquery steps with angular 4 is that it does not work for binding a field within jquery steps. that is to say in the component I have a variable called
public borrar:string;
then a method
loadInfo() {
this.borrar = "hola mundo"
}
in the view that redefines I have
<input type="button" (click)="loadInfo();" value="aqui">
{{ borrar }}
When I click everything works normal. Shows the value of the variable. but if I put it where jquery steps are applied it does not work. It shows nothing or nothing error. nor value of the variable.
the following script is for applying jquery steps
var form = $("#example-form");
form.validate({
errorPlacement: function errorPlacement(error, element) { element.before(error); },
rules: {
confirm: {
equalTo: "#password"
}
}
});
form.children("div").steps({
headerTag: "h3",
bodyTag: "section",
transitionEffect: "slideLeft",
onStepChanging: function (event, currentIndex, newIndex)
{
form.validate().settings.ignore = ":disabled,:hidden";
return form.valid();
},
onFinishing: function (event, currentIndex)
{
form.validate().settings.ignore = ":disabled";
return form.valid();
},
onFinished: function (event, currentIndex)
{
alert("Submitted!");
}
});
when applying form.children("div").steps
all the variables that are inside the form with id "# example-form" stop working, they are not shown at all. I've been looking for days how to solve this and I can not find how to solve it.