jquery steps does not work on angular 4

0

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.

    
asked by santiago 07.01.2018 в 17:13
source

1 answer

2

The main reason why that does not work is that the jquery-steps add-on removes your html mark.

  

Using Jquery in Angular is a bad idea, but if you want it to work,   I can offer you a bit of modification for the library that maybe you   help.

jquery.steps.js

function render(wizard, options, state) {
+    var contentWrapper = $('<{0} class=\"{1}\"></{0}>'.format(options.contentContainerTag, "content " + options.clearFixCssClass));
+    contentWrapper.append(wizard.children());
    // Create a content wrapper and copy HTML from the intial wizard structure
    var wrapperTemplate = "<{0} class=\"{1}\">{2}</{0}>",
        orientation = getValidEnumValue(stepsOrientation, options.stepsOrientation),
        verticalCssClass = (orientation === stepsOrientation.vertical) ? " vertical" : "",
-       //contentWrapper = $(wrapperTemplate.format(options.contentContainerTag, "content " + options.clearFixCssClass, wizard.html())),

Additional information:

CKEditor can be obtained and used in Angular. You can install it in the following way and use it in your components or main module:

npm install ng2-ckeditor --save

You can read its documentation and how to use it, here .

KCFinder:

  

I do not know its implementation for Angular, if there was one I would appreciate   who left it in comments.

I can recommend this FileManager, which you can search but in the end do not implement it: FileManager

    
answered by 07.01.2018 / 18:42
source