Formgroup and formcontrolname not working after updating angular syncfusion packges

[Dayakar Reddy]

HI Team,

here in below link it is working, but not on build as we have updated packages

https://stackblitz.com/edit/angular-7kakhb-dx8n99?file=app/app.module.ts

After updating angular 11.2.10 to angular 12.2.16 and syncfusion packages from 19.4.42 to 20.2.43 the formSontrolName not working for syncfuison controls. please check the attached screenshot. in earlier version it is worked fine. ejs- dropdown, ejs textbox and ejs- datepicker not working with form group after updating.

component code calling createFormGroup() on ngInit() event

statusFields: Object = { value: 'status' };

statuses = ['Active', 'Created'];

createFormGroup() {

this.checksheetForm = new FormGroup({

defaultText: new FormControl('Default angular text'),

defaultDropdown: new FormControl('Active'),

syncfusionText: new FormControl('Syncfusuion'),

syncfusionDropdown: new FormControl('Active')

});

}

html code

<form [formGroup]="checksheetForm">

<div class="row">

<div class="col-6">

<span>Default Controlsspan>

<div class="form-group e-float-input">

<input type="text" formControlName="defaultText" required>

<span class="e-float-line">span>

<label class="e-float-text">Text *label>

div>

<div class="form-group e-float-input">

<select formControlName="defaultDropdown">

<option value="">Default statusoption>

<option *ngFor="let status of statuses">{{status}}option>

select>

div>

div>

<div class="col-6">

<span>Syncfusion Controlspan>

<div class="form-group e-float-input">

<ejs-textbox id="txt-tag" name="tag" formControlName="syncfusionText" placeholder="Text"

floatLabelType="Auto">

ejs-textbox>

div>

<div class="form-group e-float-input">

<ejs-dropdownlist formControlName="syncfusionDropdown" name="syncfusionDropdown" [dataSource]="statuses"

[fields]="statusFields" placeholder="Dropdown" floatLabelType="Auto">ejs-dropdownlist>

div>

div>

div>

form>

Attachment: sycf_3b4e8bfc.zip

[Sureshkumar P]

Hi Dayakar,

We suspect that some duplicate packages might be installed in your ‘@syncfusion’ folder of ‘node_modules’. Please follow the below steps to overcome the reported issue.    

1. Delete package.lock.json file from your application.

2. Remove the “@syncfusion” folder from the node_modules.

3. Then install the new packages.

  

UG Link: https://ej2.syncfusion.com/angular/documentation/common/how-to/update-npm-package/#update-syncfusion-npm-package

If still, you have faced the same issue, then replicate the same issue with any local sample and revert us with a detailed issue replication procedure. These details will help us to provide an exact solution as earlier as possible.

Note: If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Regards,

Sureshkumar P

[Zemmy Indrapatih]

Sorry I'm joining this thread as I also experienced the same issue.
Please try my attached sample.

In my sample, the same code if I run with ejs v20.1.x, the "ejs-textbox" can read my input inside reactive form, but if I upgrade it to v20.2.x, the "ejs-textbox" cannot read whatever text inside it.


Regards,
M. Zemmy Indrapatih.

Attachment: syncfusionangulartextbox__no_node_modules_3a2f0922.rar

[Dayakar Reddy]

Thank you for the reply Sureshkumar P.

I followed your instructions, i am still facing the issue. looks like other users also facing the same problem.

[Robert Titular]

I'm also experiencing the same behavior where my controls are no longer binding to a form group after updating my controls to 20.2.43/44 from 20.1.57/58/61

I've deleted the entire node_modules folder and did an npm install. Also ran npm dedupe to be on the safe side - same results.

Will have to drop back to an earlier version that was working.

Bob

[Sureshkumar P]

Hi Robert/ Dayakar/ Zemmy, 

Thanks for your shared information. We have confirmed the reported issue is an issue at our end and this fix will be included in our upcoming weekly patch release, which is expected to be rolled out on August 31^st, 2022.

You can track the status of this issue from the below feedback.

Feedback: https://www.syncfusion.com/feedback/37100


  

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization

Regards,

Sureshkumar P

[Jeremy Carter]

Also an issue here for me. All bindings to formControlName and value accessors are broken. This is actually a critical bug - are there no tests around reactive forms before releasing? Thanks for getting on to it quickly.

[Sureshkumar P]

Hi Jeremy,

Sorry for the inconvenience, as per our previous update we will include and update the further details on August 31^st,2022.

Regards,

Sureshkumar P

[Sureshkumar P]

Hi Dayakar,

We are facing complexity to resolve this issue. We will include it in the upcoming weekly patch release.

Which is expected to be rolled out on September 7^th,2022.

Regards,

Sureshkumar P

[Sureshkumar P]

Hi Dayakar,

We have fixed your reported issue from our end in the latest 20.2.48 version. So, we suggest you upgrade to our latest version to resolve the current issue. 

Please find the release notes here https://ej2.syncfusion.com/angular/documentation/release-notes/20.2.48/?type=all#common

Regards,  

Sureshkumar P

[Dayakar Reddy]

Thank you very much, we will update the packages