AngularJS component for form

Question

I have a form that contains different fields : input, select, select multiple, buttons. And I was wondering if it would be a good idea (and actually feasible) to create a component for this form, this component would be like a container that can contains all type of form fields (input, select, button, etc...).

I have put a sample of code on plunker, what I would like to do is to create a component for the form, in which I could insert how many other component I want (button, input, etc..).

<!DOCTYPE html>
<html ng-app="MyApp">

<head>
  <link data-require="[email protected]" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.6/angular.min.js"></script>
  <script src="script.js"></script>
  <script src="myInput.js"></script>
  <script src="myButton.js"></script>
</head>

<body ng-controller="MyCtrl">
  <div class="container">
    <h2>My form</h2>
    <form role="form">
      <my-input label="Firstname"></my-input>
      <my-input label="Lastname"></my-input>
      <my-button label="Submit"></my-button>
    </form>
  </div>
</body>

</html>

obviously components are the ideal solution for such cases, especially if they have standalone logic — elasticrash
– elasticrash, Commented Jun 16, 2016 at 14:16

Prince John · Accepted Answer · 2016-06-17 07:51:25Z

1

If you are planning to reuse the form in other parts of your code, I would say it would be a good idea to create it as a component.

Otherwise, it's just a matter of preference. Sometimes it can be nice to divide large portions of code into different files.

Edit: Plunker example https://plnkr.co/edit/kyt9Q6L01r06dJXLDQZH?p=preview

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

Edit 2: Updated the Plunker with an example of passing objects as attribute to the form

<body ng-controller="MyCtrl">
  <div class="container">
    <my-form inputlabels="inputs1"></my-form>
    <my-form inputlabels="inputs2"></my-form>
  </div>
</body>

edited Jun 17, 2016 at 7:51

answered Jun 16, 2016 at 14:19

Prince John

6721 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Moussa Over a year ago

Thanx so you confirm that it is feasible to create a form component that would be like a container of component?

Prince John Over a year ago

@user3414662 Yes, if you plan on reusing the form or if you don't want to mix the form with your other code. This is a nice approach if you got a really large form with lots of functions and logic bound to it, then it will be easier for you to maintain in the long run if it has it's own files (that is, being used as a component).

Moussa Over a year ago

Would you have some code to share because I don't know how to make a container component

Moussa Over a year ago

I added code on plunker, can you please tell me how to put the form in a component in order it to be a container of components

Prince John Over a year ago

@user3414662 I am not a 100 % what you are trying to do, but I have edited your Plunker as an example of how I would do it. Directives are like components, except they have access to more features. Please refer to this page for differences between components and directives: docs.angularjs.org/guide/component

|

AranS · Accepted Answer · 2016-06-16 14:19:05Z

1

If you mark "Yes" to these two questions then you should build a component:

Is it reusable?
Does the form has a unique logic?

answered Jun 16, 2016 at 14:19

AranS

1,91113 silver badges22 bronze badges

Collectives™ on Stack Overflow

AngularJS component for form

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related