<t:form t:id="form">
	<t:errors/>
	<div class="t-beaneditor">
		<h2>Person</h2>
		<t:beaneditor t:id="person"/><h3>Phones</h3>
		<div t:type="ajaxformloop" t:id="phones" source="person.phones" 
				encoder="phoneEncoder" value="phone">
			<t:select t:id="type" value="phone.type"/><t:textfield t:id="number" 	
				value="phone.number"/>
		    <t:datefield t:id="date" value="phone.startDate"/>|
		    <t:removerowlink>
		    	remove
		    </t:removerowlink>
		 </div>
		 <p>
		 	<input type="submit" value="Update"/>
		 </p>
	</div>
</t:form>  
	

		
public class DocsAjaxFormLoop
{
	@Property
	@Persist
	private Person person;
	
	@Property
	private Phone phone;
	    
	@Property
	private Boolean deleted;
	
	@OnEvent(EventConstants.ACTIVATE)
	void init()
	{
		if (person == null)
			person = new Person();
	}
	
	public ValueEncoder<Phone> getPhoneEncoder()
	{
		return new ValueEncoder<Phone>()
	    {
			public String toClient(Phone value)
	        {
				return value.getNumber();
	        }
	
	        public Phone toValue(String clientValue)
	        {
	        	for (Phone currentPhone : person.getPhones())
	            {	
	        		if (currentPhone.getNumber() != null && 
	        				clientValue.equals(currentPhone.getNumber()))
	        			return currentPhone;
	            }
	            	
	            return null;
	         }
	    };
	}
	    
	@OnEvent(EventConstants.SUCCESS)
	public Object onSuccess()
	{
		return this;
	}
	    
	@OnEvent(value=EventConstants.ADD_ROW, component="phones")
	public Object onAddRowFromPhones()
	{
		Phone phone = new Phone();
	    phone.setNumber("");
	    phone.setStartDate(new Date());
	
	    person.getPhones().add(phone);
	    phone.setPerson(person);
	    
	    return phone;
	}
	    
	@OnEvent(value=EventConstants.REMOVE_ROW, component="phones")
	void onRemoveRowFromPhones(Phone phoneToDelete) 
	{
		person.getPhones().remove(phoneToDelete);
	}
}