I am using Angular, and have a data-ui-toggle within a form tag:
<a href="" data-ng-click="NewForm=!NewForm">Click for New Form</a>
<form class="custom" name="NewForm" ng-submit="save()" novalidate data-ui-toggle="NewForm">
The problem is that the NewForm is showing when the page is loaded, then when you click "Click for New Form" the form toggles away.
I am trying to do the opposite, have not appear on load and then toggle when you click on "Click for New Form"
From the form directive docs:
If name attribute is specified, the form controller is published onto the current scope under this name.
You are using the same NewForm identifier for both, the scope variable which references the FormController which is automatically instantiated by the form directive, and for the ui-toggle flag variable.
This is why NewForm scope property is initialized as empty object {}, which is a truthy value that tells ui-directive to show the form.
In this example, you need to pick a different name for your form:
<form class="custom" name="MyForm" ng-submit="save()" novalidate data-ui-toggle="NewForm">