Using Liferay Auto Field in my custom portlet?

Question

In my custom portlet this is my view.jsp :

    <h1>Liferay auto fields example</h1>
<form action="" method="post" name="LiferayAautoFieldForm">
<fieldset><legend>Phone Numbers</legend>
<div id="phone-fields">
<div class="lfr-form-row lfr-form-row-inline">
<div class="row-fields">
<input id='phoneNumber0' name="phoneNumber0" label="Phone Number" />
<select id="phoneTypeId0" name="phoneTypeId0" label="Type">
<option value="11006" label="Business">Business</option>
<option value="11007" label="Business Fax">Business Fax</option>
<option value="11008" label="Mobile Phone">Mobile Phone</option>
<option value="11009" label="Other">Other</option>
<option value="11011" label="Personal">Personal</option>
</select>
</div>
</div>
</div>
</fieldset>
<layout>
<column>
<button type="submit" value="Save Phone Numbers" name="SavePhoneNumbers">Save Phone Numbers</button>
</column>
</layout>
</form>

I want to use new Liferay.AutoFields among tag for increasing these two fields. For this aim I use this code in view.jsp :

<aui:script use="liferay-auto-fields">
new Liferay.AutoFields(
{
contentBox: '#phone-fields',
fieldIndexes: 'phonesIndexes'
}
).render();
</aui:script>

But It has problem, after add this code and deploy my portlet I can add/delete row but after adding some rows and delete them the id of phoneNumber0 becomes wrong. Actually the sequence of phoneNumber0 doesn't regular!

How can I solve this issue? Please guide me?

Answer 1

You can refer to the Liferay source to use "liferay-auto-fields".

ROOT\html\portlet\users_admin\common\phone_numbers.jsp.

They have used auto fields for similar requirement as yours.