-2

I have seen many examples of people using a combination of HTML and directives to create an AngularJS form (like here), but I am trying to create a standalone widget, that has all of the HTML for the form in the templateURL field of the directive, so I can just insert this one line directive anywhere into another HTML file and have a form. Any suggestions?

Community
  • 1
  • 1
Zach
  • 85
  • 1
  • 1
  • 9

1 Answers1

-1

Here is a plnkr with directive examples that bring the form and an update button/callback as an example.

I define my directive like this; I used template when the form is simple:

angular.module('components', [])
  .directive('myForm', function() {
    return {
      restrict: 'E',
      template: `<form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    <input type="submit" ng-click="update(user)" value="Save" />
  </form>`,
      link: function(scope, element, attr) {
        scope.update = function(user) {
          console.log('update ' + JSON.stringify(user));
        }
      }

    }
  });

So, the directive brings the form and I defined a function 'update' that I have call on the submit button. The function displays a message in the console... for instance:

update {"name":"john doe","email":"john@doe.doe"}

The rest of the app has nothing:

angular.module('HelloApp', ['components'])
  .controller('MyCtrl', ['$scope', function($scope) {
    $scope.name = 'This is the controller';
  }]);

And the HTML looks like this:

<body>
  <div ng-controller="MyCtrl">
    <my-form></my-form>
  </div>
</body>

If you want to use templateUrl instead, I have another directive defined like this:

  .directive('myFormExternal', function() {
    return {
      restrict: 'E',
      templateUrl: 'myFormExternal.html',
      link: function(scope, element, attr) {
        scope.updateExternal = function(user) {
          console.log('External Form: ' + JSON.stringify(user));
        }
      }

    }
  });

And the form html is:

<form novalidate class="simple-form">
    Firstname: <input type="text" ng-model="external.firstname" /><br />
    Lastname: <input type="text" ng-model="external.lastname" /><br />
    <input type="submit" ng-click="updateExternal(external)" value="Save" />
  </form>

Hope this helps. Let us know.

Gregori
  • 829
  • 5
  • 12
  • Thank you that is exactly what I am looking for. On the plnkr all that shows up is "Using Template" and "Using Template URL" – Zach Jun 21 '16 at 01:18
  • @Zach Can you retry https://plnkr.co/edit/TOhKNM?p=preview ? I was adding the second directive. If it only shows the titles "Using Template..." without the forms, can you tell me which browser and if you have any errors in the console? – Gregori Jun 21 '16 at 01:20
  • I tried on Chrome and Safari – Gregori Jun 21 '16 at 01:23
  • I am using safari and I have these errors in the console: Error: [$injector:modulerr] Failed to instantiate module HelloApp due to: [$injector:nomod] Module 'HelloApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. SyntaxError: Invalid character: '`' – Zach Jun 21 '16 at 01:25
  • It does work in Chrome though. I appreciate the simple demonstration I have seen so many examples that just confused me this makes a lot more sense thank you very much. – Zach Jun 21 '16 at 01:27
  • 1
    @Zach that is good about Chrome... weird about Safari; but, hopefully that should get you started. – Gregori Jun 21 '16 at 01:30