separate model and view, use bidirectional binding to bind two

package model
{
	public class FormModel
	{
			[Bindable]
			public var username:String;
			
			[Bindable]
			public var group:String;
		


	}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="352" height="152">
	<mx:Script>
		<![CDATA[
			import model.FormModel;
			
		public var mymodel:FormModel=new FormModel();
			
			
		]]>
	</mx:Script>
	
	<mx:Binding source="usernameId.text" destination="mymodel.username" />
	<mx:Binding source="groupId.text" destination="mymodel.group" />
	
	<mx:Label x="31" y="25" text="username"/>
	<mx:TextInput id="usernameId" text="{mymodel.username}" x="135" y="23"/>
	<mx:Label x="31" y="79" text="group"/>
	<mx:TextInput id="groupId" text="{mymodel.group}" x="135" y="77"/>
</mx:Canvas>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" 
	xmlns:ns1="view.*" width="617" height="206" creationComplete="onComplete()">
	<mx:Script>
		<![CDATA[
			
			
			private function onComplete() : void {
				screen1.mymodel.username="<username>";
				screen1.mymodel.group="<group>";
			}
			
			private function onClick():void {
				trace("username: "+screen1.mymodel.username);
				trace("group=:"+screen1.mymodel.group);
			}
		]]>
	</mx:Script>
	<ns1:FormView id="screen1" x="148" y="33">
	</ns1:FormView>
	<mx:Button x="26" y="50" label="Show Data" click="onClick()"/>
	
</mx:Application>