Event on Form

[mathodParticipant]

Hello,
I have a form create like this :

let options ={
        template:template,
        value:value
    };
form = jqwidgets.createInstance('.listAttributes','jqxForm',options);

so i have nothing in my html. Just that :

<div id="listAttributes" class="listAttributes"></div>

How can i bind an eventChange on this form?

Thanks a lot for your help !

[MartinParticipant]

Hello mathod,

You can use the id of the form’s <div/> to bind the events. In the same way as for the other widgets.
Here is an Example.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[mathodParticipant]

Thank you !
I code with Angular, it’s the same way ? or it exist another way ?
I will try yours !

[mathodParticipant]

Maybe it’s the only way, because i can’t call my component like this :

        <jqxForm #myAttributesForm
          [width]= '300'
          [height] ='auto'
          [template] = 'template'>
      </jqxForm>

what i want to do doesn’t work with this way, so i will need to make something like on your example maybe..
But, i need to import jqxform.js to make this ? it’s not a problem to use jqxform.js in angular ?

Actually i have this error, do you know why ?

[mathodParticipant]

Sorry to post lot of messages but i can’t edit…

I create a grid, and i have an event on cellClick.
This event will create a form which is different between differents cells.

I have success to create this with that :

  myGridOnCellSelect(event:any):void {
    document.getElementById("listAttributes").remove();
    let column = this.myGridPosition.getcolumn(event.args.datafield).datafield;
    this.showAttributesForm = true;
    this.columnSelected = column;
    this.template  = this.createTemplate(this.columnSelected);;
    this.value =  this.createValues(this.columnSelected); 
    let options ={
        template:this.template,
        value:this.value
    };

    var iDiv = document.createElement('div');
    var node = document.getElementById("main");
    iDiv.id = 'listAttributes';
    iDiv.className ='listAttributes';
    node.append(iDiv);
    this.form = jqwidgets.createInstance('.listAttributes','jqxForm',options);
    this.myAttributesForm = jqwidgets.createInstance('.listAttributes','jqxForm',options);
    this.form.refresh();
  }

But with this way, i don’t know how can i bind an event on this form…

I don’t know how use your solution in angular …

Thanks a lot !

[mathodParticipant]

Hello !

Ok it’s résolve !

   this.form.addEventHandler('formDataChange', (event: any) => {
        console.log("ok");
    });

It works ! could you confirm that is the good way to make what i want ?

Thanks !

Math

[MartinParticipant]

Hello Math,

Yes, this is exactly the right way for attaching events when you create widget components like this.

Best Regards,
Martin

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts