dynamic value for Name property does not work with TextBox

[shivani goyal]

Hi,

I am trying to create syncfusion textbox in loop whose properties are defined by loop variable. When I provide fixed value for name, it worked fine. As soon as I use loop variable value in name, it results into errors. 

Code snippet:

Fixed value which is working good:

<ejs-textbox placeholder="c05"  floatLabelType="Always" id="AttributeC05" name="AttributeC05"></ejs-textbox>
    <div *ngFor="let data of ColumnConfigurationArray" class="col-lg-6">
      <ejs-textbox placeholder="{{data.ColumnName}}" floatLabelType="Always" id="{{data.ColumnName}}" name="AttributeC05" >
      </ejs-textbox>
    </div>

Variable value results in error:

<div *ngFor="let data of ColumnConfigurationArray" class="col-lg-6">
      <ejs-textbox placeholder="{{data.ColumnName}}" floatLabelType="Always" id="{{data.ColumnName}}" name="{{data.ColumnName}}" >
      </ejs-textbox>
 </div>

[Sureshkumar P]

Hi Shivani, 

 

Greetings from Syncfusion support.  

 

Based on your shared information we suspect that ypu want to load the interpolation data into name attribute of the component. We suggest you use our htmlAttributes property to resolve the facing issue from your end.  

 

Kindly refer the below code example. 

<ejs-textbox placeholder="{{data.ColumnName}}" floatLabelType="Always" id="{{data.ColumnName}}" 

    [htmlAttributes]="{ name: data.ColumnName}"> 

</ejs-textbox> 

 

 

We have modified your sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-s2qpoz-qt8wnj?file=app.component.html  

 

Regards, 

Sureshkumar P 

[shivani goyal]

Thanks for the response.

I have resolved by changing the approach. I have used Reactive Forms' formControllerName which solved the purpose.

[Sureshkumar P]

Hi Shivani, 

 

Thanks for your update. Please get back to us if you need any further assistance on this.  

 

Regards, 

Sureshkumar P