form builder in angularjs

If you want a form builder in AngularJS (1.x), you usually have 3 options:

1. Use a library/plugin
2. Build a dynamic form renderer
3. Create a drag-and-drop form builder UI

If you mean a dynamic form builder from JSON/config, here’s a simple AngularJS approach.

---

1) Example: Dynamic form from schema

HTML

<div ng-app="app" ng-controller="FormCtrl">
  <form name="myForm" ng-submit="submitForm()">
    <div ng-repeat="field in formFields">
      <label>{{field.label}}</label>

      <input ng-if="field.type === 'text'"
             type="text"
             ng-model="formData[field.name]"
             placeholder="{{field.placeholder}}"
             required="{{field.required}}" />

      <input ng-if="field.type === 'email'"
             type="email"
             ng-model="formData[field.name]"
             placeholder="{{field.placeholder}}" />

      <select ng-if="field.type === 'select'"
              ng-model="formData[field.name]"
              ng-options="opt.value as opt.label for opt in field.options">
      </select>
    </div>

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

  <pre>{{formData | json}}</pre>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('FormCtrl', function($scope) {
  $scope.formFields = [
    {
      name: 'fullName',
      label: 'Full Name',
      type: 'text',
      placeholder: 'Enter your name',
      required: true
    },
    {
      name: 'email',
      label: 'Email',
      type: 'email',
      placeholder: 'Enter your email'
    },
    {
      name: 'gender',
      label: 'Gender',
      type: 'select',
      options: [
        { label: 'Male', value: 'male' },
        { label: 'Female', value: 'female' }
      ]
    }
  ];

  $scope.formData = {};

  $scope.submitForm = function() {
    console.log($scope.formData);
    alert('Form submitted!');
  };
});

---

2) If you want drag-and-drop form builder

AngularJS itself does not include a drag-and-drop form builder. You’d typically combine it with:

• jQuery UI
• SortableJS
• Angular UI Sortable
• custom components

You would store form structure like this:

$scope.fields = [
  { type: 'text', label: 'First Name', name: 'firstName' },
  { type: 'email', label: 'Email', name: 'email' }
];

Then render a preview and allow reordering/editing.

---

3) Useful libraries for AngularJS form building

• angular-formly — very popular for dynamic forms
• angular-schema-form — build forms from JSON schema
• ui-sortable — for drag/drop ordering
• Angular UI Bootstrap — for styled inputs/modals

---

4) Recommendation

If your goal is:

• Dynamic forms → use angular-formly
• Schema-based forms → use angular-schema-form
• Visual drag-and-drop builder → build a custom builder with sortable fields

---

If you want, I can give you:

1. a full AngularJS form builder example,
2. a drag-and-drop form builder, or
3. an angular-formly setup.