jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Reactive Forms reset not working
Tagged: angular reactive forms
This topic contains 6 replies, has 3 voices, and was last updated by Hristo 5 years ago.
-
Author
-
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
i try with this :
this.obatForm.reset({kodeitem:''});
-> not workingthis.obatForm.reset({kodeitem:' '});
-> is working change jqxinput empty (is actualy space)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.tsBest Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comwe 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’, ”);
}
}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> }
Hello sk8027,
I tested this example and it seems to work fine.
Please, clarify it.Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comUpdate:
Please, take a look at this example.
Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.