jQuery UI Widgets Forums Angular Reactive Forms reset not working

This topic contains 6 replies, has 3 voices, and was last updated by  Hristo 2 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Reactive Forms reset not working #104404

    wahyuam
    Participant

    Hello I’m using angular version of Jqwidget, i try to reset reactiveforms but not working, the value still show on jqxinput
    here is the code:

    appmodule.ts

    ...
    import { jqxInputModule } from 'jqwidgets-scripts/jqwidgets-ng/jqxinput';
    import { jqxButtonModule } from 'jqwidgets-scripts/jqwidgets-ng/jqxbuttons';
    ..
      imports: [
        BrowserModule,
        jqxBarGaugeModule, jqxInputModule, jqxButtonModule,
        FormsModule,
        ReactiveFormsModule
      ],
    ...

    app.componnet.ts

    ...
     obatForm: FormGroup;
      constructor(private formBuilder: FormBuilder) {
      
        this.obatForm = this.formBuilder.group({
          kodeitem: '',
        });
      }
    
      resetForm(){
        this.obatForm.reset();
        console.log('reset');
      }

    html:

    <form [formGroup]="obatForm" novalidate>
    <jqxInput formControlName="kodeitem"  [height]='25' [width]="'98%'" [placeHolder]='kode' [theme]=gtheme></jqxInput>
    </form>
    
    <jqxButton #btn2 [width]='120' [height]='30' [theme]=gtheme (onClick)="resetForm()">
        reset
    </jqxButton>

    I try using normal input ” <input …/> its working normaly.
    i check the form control value after reset is already null, but the value still show on jqxinput.

    did i do something wrong? pls help

    Reactive Forms reset not working #104405

    wahyuam
    Participant

    i try with this :

    this.obatForm.reset({kodeitem:''}); -> not working

    this.obatForm.reset({kodeitem:' '}); -> is working change jqxinput empty (is actualy space)

    Reactive Forms reset not working #104416

    Hristo
    Participant

    Hello wahyuam,

    Thank you for this information I will discuss this with my colleagues.
    On the other side, the second mentioned approach from you seems to work fine.
    Please, take a look at this example:
    https://stackblitz.com/edit/github-y6xqrr?file=src/app/app.component.ts

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Reactive Forms reset not working #111849

    sk8027
    Participant

    we are facing this issue since ver 6 and I fixed in ts file of input. but we didn’t get any solution from the vendor. issue is if there is null value then code is not handling the setting of value to jqxInput. so we added else part in code. now in angular 9 we are using modules so finding the place where this code is written as it is in multiple places for every component. earlier we were using jqxwidget-ts
    writeValue(value) {
    if (this.widgetObject && value) {
    if (this.initialLoad) {
    setTimeout(_ => this.host.jqxInput(‘val’, value));
    this.initialLoad = false;
    }
    this.host.jqxInput(‘val’, value);
    } else { // this else added by Syntaxmatic Technologies
    this.host.jqxInput(‘val’, ”);
    }
    }

    Reactive Forms reset not working #111850

    sk8027
    Participant

    for angular 9 i changed in this file and it resolved. node_modules\jqwidgets-ng\__ivy_ngcc__\fesm2015\jqwidgets-ng-jqxinput.js

        writeValue(value) {
            if (this.widgetObject && value) {
                if (this.initialLoad) {
                    setTimeout(_ => this.host.jqxInput('val', value));
                    this.initialLoad = false;
                }
                this.host.jqxInput('val', value);
            } <strong>else { // this else added by Syntaxmatic Technologies
    		   this.host.jqxInput('val', '');
    	   }</strong>
        }
    Reactive Forms reset not working #111853

    Hristo
    Participant

    Hello sk8027,

    I tested this example and it seems to work fine.
    Please, clarify it.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

    Reactive Forms reset not working #111854

    Hristo
    Participant

    Update:

    Please, take a look at this example.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.