Type Coercion failed error

Question

My Code:
<?xml version="1.0" encoding="UTF-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:states>
        <mx:State name="addRoleState">
             <mx:RemoveChild target="rLabel"/>
            <mx:RemoveChild target="pLabel"/>
            <mx:RemoveChild target="h1Box"/>
            <mx:AddChild relativeTo="roleForm" position="firstChild">
                <mx:FormItem id="rNameId" label="Role">
                    <mx:TextInput id="roleName" />
                </mx:FormItem>
            </mx:AddChild>
              <mx:AddChild relativeTo="roleForm" position="lastChild">
                <mx:FormItem>
                    <mx:HBox id="h2Box">
                         <mx:Button  id="saveButton" label="Save" click=""/>
                         <mx:Button  id="cancelButton" label="Cancel" click="currentState=' '"/>
                    </mx:HBox>       
                </mx:FormItem>
            </mx:AddChild>
        </mx:State>
    </mx:states>
    <mx:Form id="roleForm">
        <mx:FormItem  id="rLabel" label="Role">
            <mx:ComboBox id="roleCombo" labelField="roleName"/>
        </mx:FormItem>
        <mx:FormItem id="pLabel" label="Permission">
            <mx:List id="permDataId" width="75"/>
        </mx:FormItem>
        <mx:FormItem id="h1Box">
             <mx:HBox>
                 <mx:Button  id="editButton" label="Edit" click=""/>
                 <mx:Button  id="deleteButton" label="Delete" click=""/>
                 <mx:Button id="addButton" label="Add Role" click="currentState='addRoleState'"/>
             </mx:HBox>
        </mx:FormItem>
    </mx:Form>
</mx:WindowedApplication>
I am getting the below error when I click 'cancel' button (where currentState=' ' event function triggers)
TypeError: Error #1034: Type Coercion failed: cannot convert "h1Box" to mx.core.UIComponent.
     at mx.states::RemoveChild/remove()
     at mx.core::UIComponent/removeState()
     at mx.core::UIComponent/commitCurrentState()
     at mx.core::UIComponent/setCurrentState()
     at mx.core::UIComponent/set currentState()
     at RoleInfo/__cancelButton_click()
Please help me understand what is causing the above error.

Answer 1

Hi,
I was able to get your app to work under Flex 3.5 by making a few changes.  First, I had to add curly brakets around the RemoveChild targets and the AddChild relativeTo properties.  Finally, I removed the extra space in cancelButton's click method.
Hope this helps,
Chris
Here's the revised code:
<?xml version="1.0" encoding="UTF-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml">
     <mx:states>
          <mx:State name="addRoleState">
               <mx:RemoveChild target="{rLabel}"/>
               <mx:RemoveChild target="{pLabel}"/>
               <mx:RemoveChild target="{h1Box}"/>
               <mx:AddChild relativeTo="{roleForm}" position="firstChild">
                    <mx:FormItem id="rNameId" label="Role">
                         <mx:TextInput id="roleName" />
                    </mx:FormItem>
               </mx:AddChild>               <mx:AddChild position="lastChild">
                    <mx:FormItem>
                         <mx:HBox id="h2Box">
                              <mx:Button  id="saveButton" label="Save" />
                              <mx:Button  id="cancelButton" label="Cancel" click="currentState=''"/>
                         </mx:HBox>       
                    </mx:FormItem>
               </mx:AddChild>
          </mx:State>
     </mx:states>
     <mx:Form id="roleForm">
          <mx:FormItem  id="rLabel" label="Role">
               <mx:ComboBox id="roleCombo" labelField="roleName"/>
          </mx:FormItem>
          <mx:FormItem id="pLabel" label="Permission">
               <mx:List id="permDataId" width="75"/>
          </mx:FormItem>
          <mx:FormItem id="h1Box">
               <mx:HBox>
                    <mx:Button  id="editButton" label="Edit" />
                    <mx:Button  id="deleteButton" label="Delete" />
                    <mx:Button id="addButton" label="Add Role" click="currentState='addRoleState'"/>
               </mx:HBox>
          </mx:FormItem>
     </mx:Form>
</mx:WindowedApplication>