Creating concise AngularJS Controllers for form functionality

Question

Creating concise AngularJS Controllers for form functionality

While working on a web project with AngularJS, I've observed that most of my form controllers share similar structures. For instance, the only difference between my login controller (as shown below) and a reset password controller is that instead of $scope.loginForm.$invalid, I'd have $scope.resetForm.$invalid. Additionally, I would be using ResetService rather than AuthService.

angular.module('app').controller('LoginCtrl', function ($scope, AuthService) {

  // Form input data
  $scope.formData = {};

  // Check if submit process is ongoing
  $scope.busy = false;

  // Determine if form has been submitted
  $scope.submitted = false;

  // Attempt to submit form via AJAX
  $scope.submit = function (actionUrl) {

    $scope.busy = true;
    $scope.submitted = true;

    // If form is invalid, return without submitting
    if ($scope.loginForm.$invalid) {
      $scope.busy = false;
      return;
    }

    // Submit data via AJAX
    AuthService.login(actionUrl, $scope.formData).error(function () {
      $scope.busy = false;
    });

  };

});

It's quite evident that this code repetition violates the DRY principle. I presume there must be an Angular functionality or design pattern to refactor out this common functionality?

javascript angularjs dry

Answer 1

Answer №1

A controller called FormCtrl was developed to encompass all the necessary functionality. The unique aspects across forms are the form name attribute and the AJAX method used by the service, which are passed as parameters in the function after the $scope. To utilize these variables, I made some adjustments to the code.

In order for the LoginCtrl (or any other form controller that utilizes this) to function properly, it only needs to instantiate the FormCtrl and supply it with the $scope, form name attribute, and the service method used for making the AJAX request.

login.html

<form ng-controller="LoginCtrl"
      ng-submit="submit('my-ajax-url.php')"
      name="loginForm">
  ...
</form>

FormCtrl.js

angular.module('app').controller('FormCtrl', function ($scope, formName, ajaxFunction) {

  // Form input data
  $scope.formData = {};

  // Check if a submit process is in progress
  $scope.busy = false;

  // Has the form been submitted?
  $scope.submitted = false;

  // Try submitting the form via AJAX
  $scope.submit = function (actionUrl) {

    $scope.busy = true;
    $scope.submitted = true;

    // If invalid, enable form and exit
    if ($scope[formName].$invalid) {
      $scope.busy = false;
      return;
    }

    // Send data using AJAX
    ajaxFunction(actionUrl, $scope.formData).error(function () {
      $scope.busy = false;
    });

  };

});

LoginCtrl.js

angular.module('app').controller('LoginCtrl', function ($scope, $controller, AuthService) {

  // Create form controller instance
  $controller('FormCtrl', {
    $scope: $scope,
    formName: 'loginForm',
    ajaxFunction: AuthService.login
  });

});

Answer 2

A controller called FormCtrl was developed to encompass all the necessary functionality. The unique aspects across forms are the form name attribute and the AJAX method used by the service, which are passed as parameters in the function after the $scope. To utilize these variables, I made some adjustments to the code.

In order for the LoginCtrl (or any other form controller that utilizes this) to function properly, it only needs to instantiate the FormCtrl and supply it with the $scope, form name attribute, and the service method used for making the AJAX request.

login.html

<form ng-controller="LoginCtrl"
      ng-submit="submit('my-ajax-url.php')"
      name="loginForm">
  ...
</form>

FormCtrl.js

angular.module('app').controller('FormCtrl', function ($scope, formName, ajaxFunction) {

  // Form input data
  $scope.formData = {};

  // Check if a submit process is in progress
  $scope.busy = false;

  // Has the form been submitted?
  $scope.submitted = false;

  // Try submitting the form via AJAX
  $scope.submit = function (actionUrl) {

    $scope.busy = true;
    $scope.submitted = true;

    // If invalid, enable form and exit
    if ($scope[formName].$invalid) {
      $scope.busy = false;
      return;
    }

    // Send data using AJAX
    ajaxFunction(actionUrl, $scope.formData).error(function () {
      $scope.busy = false;
    });

  };

});

LoginCtrl.js

angular.module('app').controller('LoginCtrl', function ($scope, $controller, AuthService) {

  // Create form controller instance
  $controller('FormCtrl', {
    $scope: $scope,
    formName: 'loginForm',
    ajaxFunction: AuthService.login
  });

});

Answer 3

Answer №2

Take a look at this interesting information:


angular.module('app').controller('LoginCtrl', FUNCTION)

You have the ability to create these functions using a factory.

In the world of angular, you can include a $inject variable in a function with an array of names to be injected. For example:

functionName.$inject = ['$rootScope'];

When angular calls that function, $rootScope will be injected. This allows you to dynamically inject services into functions.

angular.module('app')
    .controller(
        'LoginCtrl',
        ControllerFactory.createSubmitController(function(){}, ['$scope', 'AuthService'])
    )

Within the createSubmitController method, you craft a wrapper function with all the necessary injections. Enhance the $scope with desired functionalities, then execute the first parameter function with all injections and the enhanced $scope.

This approach provides flexibility while maintaining a solid foundation of default behaviors.

You also have the option to manually trigger injection within the factory, requiring only a function like:

function($scope, AuthService)

The choice is yours.

Refer to $inject Annotation for more details.

Answer 4

Take a look at this interesting information:


angular.module('app').controller('LoginCtrl', FUNCTION)

You have the ability to create these functions using a factory.

In the world of angular, you can include a $inject variable in a function with an array of names to be injected. For example:

functionName.$inject = ['$rootScope'];

When angular calls that function, $rootScope will be injected. This allows you to dynamically inject services into functions.

angular.module('app')
    .controller(
        'LoginCtrl',
        ControllerFactory.createSubmitController(function(){}, ['$scope', 'AuthService'])
    )

Within the createSubmitController method, you craft a wrapper function with all the necessary injections. Enhance the $scope with desired functionalities, then execute the first parameter function with all injections and the enhanced $scope.

This approach provides flexibility while maintaining a solid foundation of default behaviors.

You also have the option to manually trigger injection within the factory, requiring only a function like:

function($scope, AuthService)

The choice is yours.

Refer to $inject Annotation for more details.

Creating concise AngularJS Controllers for form functionality

Answer №1

Answer №2

Similar questions

Unpacking a props object results in an undefined value

What is the best way to format a time in a 12-hour clock using JavaScript?

Learn how to easily incorporate a drop-down list into the material-UI Search component within the navbar to enhance the search results

transfer information between different express middleware functions within a universal react application

Having trouble accessing session value within an AngularJS file

What is the process for confirming the authenticity of lengthy passwords with bcrypt?

Creating a webpage that dynamically loads both content and video using HTML and Javascript

How can I choose records from collection 'x' in mongodb?

What is the best way to extract all image URLs from a website using JavaScript?

Inquiry from a newcomer: ASP.NET with jQuery

Syntax error occurs while attempting to render the return statement in a React Component

Obtaining a URL from a parameter

Enhance the sent server parameters by including extra options in fineuploader

Error: JavaScript function call did not provide a return value

Tips for transforming numerical date data into a string format

The jQuery click event is failing on the second attempt

Creating a Dynamic Form with jQuery, AJAX, PHP, and MySQL for Multiple Input Fields

Error message in console: React Form showing "Form submission canceled due to lack of connection" despite successful submission

Instructions for displaying typed chat messages on the screen using socket.io and node.js

Changing the z-index using createjs