1. Home
  2. Forum
  3. AngularJS
  4. Angularjs form display by event

Angularjs form display by event

Hi , 

im trying to create a form that will be displayed only if an event is triggered in a specific component. I tried creating a flag in ctrl and using ng-if to display only if the flag is true but no success...

any help would be much appreciated!!!


3 Replies
IL Indhumathy Loganathan Syncfusion Team August 10, 2023 11:23 AM UTC

Hi Elisheva,


Greetings from Syncfusion support.


From the shared explanation, we were not clear about your query and the exact Syncfusion control used at your end. Could you please refer to our documentation site and confirm the exact control you have been using at your end.


https://help.syncfusion.com/angularjs/overview


Based on the shared details, we will assist you promptly.


Regards,

Indhumathy L


AS Adrian Scott November 28, 2024 01:58 PM UTC

To display a form in AngularJS based on an event, you can use AngularJS directives like ng-show, ng-hide, or ng-if in combination with a model or controller function that handles the event.

Here's an example of how you can show a form when an event occurs, such as a button click:


HTML:

<!DOCTYPE html>

<html ng-app="myApp">

  <head>

    <script src="https://code.angularjs.org/1.8.2/angular.min.js"></script>

  </head>

  <body ng-controller="myCtrl">


    <!-- Button to trigger the event -->

    <button ng-click="showForm = !showForm">Toggle Form</button>


    <!-- Form displayed based on the event -->

    <form ng-show="showForm">

      <label for="name">Name:</label>

      <input type="text" id="name" ng-model="user.name">

      <br>

      <label for="email">Email:</label>

      <input type="email" id="email" ng-model="user.email">

      <br>

      <button type="submit">Submit</button>

    </form>


  </body>

</html>


JavaScript (AngularJS Controller):

angular.module('myApp', [])
  .controller('myCtrl', function($scope) {
    $scope.showForm = false; // Initial state of the form
    $scope.user = {}; // User data model
  });


Explanation:

  • The form is initially hidden, as showForm is set to false.
  • When the button is clicked, the ng-click directive toggles the value of showForm, which controls the visibility of the form using the ng-show directive.
  • The form becomes visible when showForm is set to true.

This is a basic example, but you can adapt it based on your specific requirements, such as handling other events like mouse hover or form submission.


VM Vishwanathan Muruganantham Syncfusion Team November 29, 2024 09:57 AM UTC

Hi Adrian,


Thanks for sharing the solution. If you need further assistance, please get back to us.


Regards,
Vishwanathan


Loader.
Up arrow icon